[Ext JS 4] MVC 应用程序框架
前言
大型客户端应用程序总是很难编写，很难组织和很难维护。随着功能的增加和更多的开发人员加入项目，对项目的控制也越来越困难了。Ext JS 4 提供了一个新的应用程序框架帮助组织代码。
模型 - 一组栏位和数据的集合。Model （在Ext JS 3中使用Record class）
视图 - 组件类型, grids,trees 和 panels 都是属于试图
控制器 -- 用来渲染试图，实例模型和其他的应用逻辑
文件结构
Ext JS4 遵循统一的目录结构。看一个例子：
index.html 的内容大致如下：
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
在app.js 中创建应用
每一个Ext JS 4的应用都从创建一个Application 类的实例开始。这个Application实例里配置了一些全局的设置（比如应用的名字）和模型，试图和控制器的设置。一个application也包含了一个启动的函数。
这里以一个简单的帐号管理应用为例，
首先，定义一个全局命名空间。所有的Ext JS应用都应该使用一个全局命名空间，所有的应用的类都位于这个之下。这里以 “AM”为例。
Ext.application({
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
定义一个控制器
控制器是把应用程序连接在一起的胶水。它们监听事件（从视图中过来）并执行一些操作。继续上面的例子，创建一个控制器。
app/controller/Users.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
});
然后，把这个控制器加到应用中(app.js)
Ext.application({
...
controllers: [
'Users'
],
...
});
当在浏览器中访问index.html的时候，Users这个控制器会自动被加载，它的init 函数会在应用的lanch 函数执行之前被调用。
init 函数用来设置和试图交互的控制器，以及和其他的控制器的关联。 control 函数可以很容易的监听事件并执行相应的动作处理函数。完善上面的Users 控制器
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}
});这里在init 函数里使用了 this.control 来监听视图的事件。control 函数使用了最新的 ComponentQuery 引擎来快速找到引用的组件。关于ComponentQuery 可以参考 ComponentQuery documentation。
运行的效果如下：
![[Ext JS 4] MVC 应用程序框架_第1张图片](http://img.e-com-net.com/image/info5/385d940ebc1947b885fb1a49036ed38a.jpg)
定义一个视图
试图无非就是组件，这里创建一个Users grid 定义在文件app/view/user/List.js 中
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: '[email protected]'},
{name: 'Tommy', email: '[email protected]'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});接下来，就是把这个视图加到Users控制器中。
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'
],
init: ...
onPanelRendered: ...
});
接着就是放入到app.js中的 viewport中
Ext.application({
...
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
这里使用xtype 指定userlist, （使用动态导入）， 呈现的效果如下：
![[Ext JS 4] MVC 应用程序框架_第2张图片](http://img.e-com-net.com/image/info5/b261c885296745c79edcd309ecb9bb78.jpg)
控制网格
这里添加每行的双击事件：
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'
],
init: function() {
this.control({
'userlist': {
itemdblclick: this.editUser
}
});
},
editUser: function(grid, record) {
console.log('Double clicked on ' + record.get('name'));
}
});
效果如下：
![[Ext JS 4] MVC 应用程序框架_第3张图片](http://img.e-com-net.com/image/info5/90ee2b4b696347ffaa4c3ae0ff98d8ca.jpg)
这里edit 只是简单的输出log, 以下给出一个复杂的编辑函数，定义 edit 在app/view/user/Edit.js:
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.useredit',
title : 'Edit User',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});
接下来，加入控制器中：
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List',
'user.Edit'
],
init: ...
editUser: function(grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
}
});实现效果如下：
创建Model 和 Store
创建 app/store/Users.js
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
fields: ['name', 'email'],
data: [
{name: 'Ed', email: '[email protected]'},
{name: 'Tommy', email: '[email protected]'}
]
});
接下来让Controller 使用这个 Store
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: [
'Users'
],
...
});
更新
app/view/user/List.js
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
//we no longer define the Users store in the `initComponent` method
store: 'Users',
...
});