ExtJS入门实例最近了解了下EXTJS，想记录下来自己的成果，希望对刚入门EXT的同学有点帮助，首先来做个简单的实例。
一、去官网下载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