一、去官网下载EXTJS包extjs5,这里采用的是5.0版本！

二、解压extjs包，找到

　　ext-all.js基础包（\ext-5.0.0\build）；

　　ext-all-debug.js基础包，开发的时候使用，报错会详细些（\ext-5.0.0\build）；

　　选一个合适的主题，这里我使用crisp，找到ext-theme-crisp-all.css和images文件（\packages\ext-theme-crisp\build\resources）

三、新建index.html页面并引用ext-all-debug.js、ext-theme-crisp-all.css，新建index.js应用启动设置文件、新建app文件夹放controller/view/model/store

index.html

<!DOCTYPE HTML>

<html>

<head>

    <title>demo</title>

    <link href="../Ext/ext-theme-crisp-all.css" rel="stylesheet" type="text/css" />

    <script src="../Ext/ext-all-debug.js" type="text/javascript"></script>

    <script src="index.js?v=20140721017" type="text/javascript"></script>

</head>

<body>

</body>

</html>

　　

index.js

Ext.Loader.setConfig({

    enabled: true

});

Ext.application({

    name: 'Demo1',

    appFolder: 'app',

    models: [

    ],

    stores: [

    ],

    controllers: [

        'MyController'

    ],

    views: [

        'MyViewport'

    ],

    launch: function () {

        var app = new Demo1.view.MyViewport();

    }

});

四、创建视图、控制器

在view文件夹下添加视图MyViewport.js,下面我在视图里面加了个简单的表单

MyViewport.js

Ext.define('Demo1.view.MyViewport', {

    extend: 'Ext.container.Viewport',

    initComponent: function () {

        var me = this;

        Ext.applyIf(me, {

            items: [

                {

                    xtype: 'form',

                    title: '用户修改密码',

                    width: 300,

                    bodyPadding: 10,

                    defaultType: 'textfield',

                    border: false,

                    items: [

                        {

                            allowBlank: false,

                            id: 'txtPwdOld',

                            fieldLabel: '原密码',

                            name: 'pwdOld',

                            labelWidth: 100,

                            emptyText: '原密码',

                            inputType: 'password'

                        },

                        {

                            allowBlank: false,

                            id: 'txtPwdNew',

                            fieldLabel: '新密码',

                            name: 'pwdNew',

                            labelWidth: 100,

                            emptyText: '新密码',

                            inputType: 'password'

                        },

                        {

                            allowBlank: false,

                            id: 'txtPwdNew2',

                            fieldLabel: '再次输入新密码',

                            name: 'pwdNew2',

                            labelWidth: 100,

                            emptyText: '再次输入新密码',

                            inputType: 'password'

                        }

                    ],

                    buttons: [

                        {

                            text: '保存',

                            id:'btnSavePwd'

                        }

                    ]

                }

            ]

        });

        this.callParent(arguments);

    }

});

在controller文件夹下添加控制器MyController.js,程序代码都可以写在控制器里面，用得最多的就是监听控件事件，下面简单举例，对表单中的保存按钮监听点击事件

MaController.js

Ext.define('Demo1.controller.MyController', {

    extend: 'Ext.app.Controller',

    init: function (application) {

        this.control({

            '[id=btnSavePwd]': {

                click: this.onOK

            }

        });

    },

    //保存

    onOK: function (obj) {

        var form = obj.up('form').getForm();

        if (form.isValid()) {

            Ext.Msg.alert('信息提示', '已保存');

        }

    }

});

　　

到这里，程序已经可以运行了,源码：http://pan.baidu.com/s/1i3rBS8X

ExtJS入门实例的更多相关文章

  1. 无废话ExtJs 入门教程二十一[继承：Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  2. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  3. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  4. 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...

  5. 无废话ExtJs 入门教程十三[上传图片：File]

    无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  6. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  7. 无废话ExtJs 入门教程十七[列表：GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

  8. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  9. struts入门实例

    入门实例 1  .下载struts-2.3.16.3-all  .不摆了.看哈就会下载了. 2  . 解压  后 找到 apps 文件夹. 3.    打开后将 struts2-blank.war   ...

随机推荐

  1. WAP端 经验记录1

    1. 点击元素触发事件的先后顺序:touchstart, touchend, mousedown, mouseup, click 2. Animate 的 stop 问题问题:手机端由于用 CSS3 ...

  2. [转]配置sonar、jenkins进行持续审查

    本文以CentOS操作系统为例介绍Sonar的安装配置,以及如何与Jenkins进行集成,通过pmd-cpd.checkstyle.findbugs等工具对代码进行持续审查. 一.安装配置sonar ...

  3. python批量处理excel文件数据

    https://www.zhihu.com/question/39299070?sort=created 作者:水中柳影链接:https://www.zhihu.com/question/392990 ...

  4. 将Linux文件清空的几种方法

    1.使用重定向的方法 [root@centos7 ~]# du -h test.txt .0K test.txt [root@centos7 ~]# > test.txt [root@cento ...

  5. Android Dex文件格式(二)

    第三块: 数据区         索引区中的最终数据偏移以及文件头中描述的map_off偏移都指向数据区, 还包括了即将要解析的class_def_item, 这个结构非常重要,下面就开始解析   c ...

  6. Spring bean 实现初始化、销毁方法的方式及顺序

    Spring 允许 Bean 在初始化完成后以及销毁前执行特定的操作,常用方法有三种: 使用注解,在指定方法上加上@PostConstruct或@PreDestroy注解来制定该方法是在初始化之后还是 ...

  7. 关于readdir返回值中struct dirent.d_type的取值有关问题（转）

    关于readdir返回值中struct dirent.d_type的取值问题 原网页链接 http://www.gnu.org/software/libc/manual/html_node/Direc ...

  8. M站开发规范——By Klax

    M站开发的规范,根据具体情况,涉及代码组织的模式,代码编码风格,模块化等,经...研究...决定: 1.采用AMD 规范(RequireJS)实现js模块化. 2.单个文件尽量采用面向对象编程和模块化 ...

  9. Eclipse：Dubug快捷键

    Debug快捷键 F5单步调试进入函数内部.   F6单步调试不进入函数内部,如果装了金山词霸2006则要把"取词开关"的快捷键改成其他的.   F7由函数内部返回到调用处.   ...

  10. SAP 采购订单行项目中科目分配被隐藏,发现行项目设置中显示字段长度为0

    1.sm30 维护 视图 TCVIEW 修改对应字段的显示长度