一、去官網下載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