[Ext JS 4] MVC 应用程序框架| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] MVC 应用程序框架

## [Ext JS 4] MVC 应用程序框架
### 前言
大型客户端应用程序总是很难编写，很难组织和很难维护。随着功能的增加和更多的开发人员加入项目，对项目的控制也越来越困难了。Ext JS 4 提供了一个新的应用程序框架帮助组织代码。
模型 - 一组栏位和数据的集合。Model （在Ext JS 3中使用Record class）
视图 - 组件类型, grids,trees 和 panels 都是属于试图
控制器 -- 用来渲染试图，实例模型和其他的应用逻辑

### 文件结构
Ext JS4 遵循统一的目录结构。看一个例子：

index.html 的内容大致如下：
```html
<html>
<head>
<title>Account Managertitle>
<linkrel="stylesheet"type="text/css"href="ext-4.0/resources/css/ext-all.css">
<scripttype="text/javascript"src="ext-4.0/ext-debug.js">script>
<scripttype="text/javascript"src="app.js">script>
head>
<body>body>
html>
```

###  在app.js 中创建应用
每一个Ext JS 4的应用都从创建一个Application 类的实例开始。这个Application实例里配置了一些全局的设置（比如应用的名字）和模型，试图和控制器的设置。一个application也包含了一个启动的函数。
这里以一个简单的帐号管理应用为例，
首先，定义一个全局命名空间。所有的Ext JS应用都应该使用一个全局命名空间，所有的应用的类都位于这个之下。这里以 “AM”为例。
```javascript
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'
                }
            ]
        });
    }
});
```

### 定义一个控制器
控制器是把应用程序连接在一起的胶水。它们监听事件（从视图中过来）并执行一些操作。继续上面的例子，创建一个控制器。
```javascript
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 控制器
```javascript
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。
运行的效果如下：

### 定义一个视图
试图无非就是组件，这里创建一个Users grid 定义在文件app/view/user/List.js 中
```javascript
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: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
            ]
        };
this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];
this.callParent(arguments);
    }
});
```
接下来，就是把这个视图加到Users控制器中。
```javascript
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, （使用动态导入）， 呈现的效果如下：
### 控制网格
这里添加每行的双击事件：
```javascript
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'));
    }
});
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] MVC 应用程序框架

网站导航