MVC模式， 想必大家都很清楚。 Model - View - Controller。
ExtJS在4.0以后也开始引入了MVC模式， 程序的结构也就变得规范。
开发者可以利用MVC的设计模式规划了开发流程。
下面的一个MVC模式的小例子。
在demo文件夹里就是ExtJS的MVC架构。
先来看界面。
demo.html是我们要登陆的界面，只需在demo.html中引入app.js文件即可。
app.js定义这个MVC模式的内容。 app文件夹是又controller , model, store, view文件夹。
app.js
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name: 'app',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
xtype : 'mainLayout'
}
});
},
controllers : [
'demoController'
]
});
});
定义mvc模式的文件夹为app。 应用程序的名字也是app。
demoModel.js
Ext.define('app.model.demoModel',{
extend : 'Ext.data.Model',
fields : [
{name : 'id' , type : 'int'},
{name : 'name' , type : 'string'},
{name : 'phoneNumber' , type : 'string'}
]
})
demoStore.js
var data = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
};
Ext.define('app.store.demoStore',{
extend : 'Ext.data.Store',
autoLoad: true,
model : 'app.model.demoModel',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
})
这里由于是演示。我们使用了内存代理。
deptList.js
Ext.define('app.view.deptList', {
extend : 'Ext.grid.Panel',
alias : 'widget.deptList',
frame : true,
store : 'demoStore',
frame : true,
multiSelect : true,
columns : [
{header : '编号', dataIndex : 'id', width : 100},
{header : '姓名', dataIndex : 'name', width : 100},
{header : '电话', dataIndex : 'phoneNumber', width : 200}
],
tbar:[{ xtype: 'button', text: '添加' },{ xtype: 'button', text: '删除' },{ xtype: 'button', text: '修改' }], selModel : { selType : 'checkboxmodel' } });
demoView.js只是一个普通的panel。 里面放这个grid。
注意上面的这个文件定义的时候必须以app开头。 因为我们在app.js里定义了应用程序的名字为app。
view文件夹以app.view.*开始。 model文件夹以app.model.*开始。
以此类推。
最后让我们来看下demoController.js
Ext.define('app.controller.demoController', {
extend: 'Ext.app.Controller',
init: function() {
this.control( {
'deptList button[text=添加]': {
click: function(b) {
alert('添加');
}
},
'deptList button[text=删除]': {
click: function(b) {
alert('删除');
}
},
'deptList button[text=修改]': {
click: function(b) {
alert('修改');
}
}
}
)},
models : ['demoModel'],
stores : ['demoStore'],
views : ['demoView','deptList']
});
有三个属性:
models， stores， views。 分别代表三个文件夹中自己定义的控件，model和store
我们在三个按钮的逻辑处理放到了controller中处理。 这样就很好的实现了代码分离。
最后附上源代码。。
下载地址：
http://download.csdn.net/detail/fj359941160/4287579