### Extjs 4.2.0 MVC 架构详解及官方文档中文示例
#### 一、文件结构
在Extjs 4.2.0中，为了更好地组织和管理代码，采用了一种标准的文件结构。这种结构不仅有助于提高代码的可读性和可维护性，还能确保团队成员之间的协作更加顺畅。
##### 1.1 目录结构概述
- **根目录**：通常包含了`app`目录、`ext-4`目录以及其他必要的静态资源文件。
- **app**：此目录用于存放应用程序的核心代码，包括`models`、`views`、`controllers`和`stores`等。
- **ext-4**：此目录用于存放Extjs 4.2.0的库文件。
##### 1.2 应用程序文件结构示例
```
account_manager/
|-- ext-4/
| |-- (Extjs 4.2.0库文件)
|-- app/
| |-- controllers/
| | |-- User.js
| |-- models/
| | |-- User.js
| |-- stores/
| | |-- Users.js
| |-- views/
| | |-- UserList.js
| |-- App.js
|-- index.html
```
在这个例子中，`account_manager`文件夹包含了整个应用程序。其中，`ext-4`文件夹存储了Extjs 4.2.0的核心库文件；`app`文件夹则包含了应用程序的核心组件，如`controllers`、`models`、`views`和`stores`。
#### 二、创建项目
创建一个新的Extjs 4.2.0项目通常涉及以下几个步骤：
1. **初始化项目**：在项目的根目录下创建`app`文件夹，并在此文件夹下创建相应的子文件夹，如`controllers`、`models`、`views`和`stores`等。
2. **编写入口文件**：创建`index.html`文件，并在其中引入必要的JavaScript库和CSS样式表。
3. **配置应用程序**：在`app`目录下创建`App.js`文件，这是应用程序的入口点。
##### 2.1 在`app.js`中创建项目
在`app.js`文件中，首先定义全局命名空间，然后使用`Ext.application`来创建应用程序实例。例如：
```javascript
// 全局命名空间
var AM = {};
// 创建应用程序实例
Ext.application({
name: 'AM',
launch: function () {
// 创建视图
Ext.create('AM.view.UserList');
}
});
```
#### 三、定义控制器
控制器是Extjs MVC架构中的关键组成部分之一，主要用于处理用户的交互行为。通过定义控制器，我们可以更清晰地分离业务逻辑与视图层。
##### 3.1 创建控制器
在`app/controllers`目录下创建控制器文件。例如，在`User.js`中定义`Users`控制器：
```javascript
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'button[action=add]': {
click: this.onAddClick
}
});
},
onAddClick: function (btn, e, options) {
// 添加用户逻辑
}
});
```
在`app.js`中注册刚刚创建的控制器：
```javascript
Ext.application({
name: 'AM',
controllers: ['Users'],
launch: function () {
// ...
}
});
```
当应用程序启动时，控制器会自动加载并执行`init`方法。
#### 四、定义视图
视图负责显示数据，是用户与应用程序交互的主要界面。
##### 4.1 创建视图
在`app/views`目录下创建视图文件。例如，创建`UserList.js`文件来定义用户列表视图：
```javascript
Ext.define('AM.view.UserList', {
extend: 'Ext.grid.Panel',
xtype: 'userlist',
requires: [
'AM.model.User'
],
store: {
type: 'users'
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email' }
],
tbar: [{
text: 'Add User',
action: 'add'
}]
});
```
在`app.js`中，可以通过`Ext.create`方法创建视图实例：
```javascript
Ext.application({
name: 'AM',
launch: function () {
Ext.create('AM.view.UserList', {
renderTo: Ext.getBody()
});
}
});
```
#### 五、控制Grid
在Extjs中，Grid是一个常用的视图组件，用于展示表格形式的数据。通过定义控制器的方法，我们可以轻松地控制Grid的行为。
##### 5.1 控制Grid
在控制器中，可以定义与Grid相关的操作，如添加新记录、编辑现有记录或删除记录等。
```javascript
onAddClick: function (btn, e, options) {
// 打开添加用户的对话框
var win = Ext.widget('useraddform');
win.show();
}
```
#### 六、创建Model和Store
Model和Store是Extjs MVC架构中的另外两个核心组件。Model用于定义数据结构，而Store则负责管理数据集合。
##### 6.1 创建Model
在`app/models`目录下创建Model文件。例如，创建`User.js`文件来定义用户模型：
```javascript
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' }
]
});
```
##### 6.2 创建Store
在`app/stores`目录下创建Store文件。例如，创建`Users.js`文件来定义用户数据集：
```javascript
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
});
```
#### 七、通过Model保存数据
Model不仅可以用于定义数据结构，还支持保存数据到服务器。这通常涉及到与服务器进行通信，以实现数据的持久化。
##### 7.1 保存数据
通过Model的`save`方法，我们可以轻松地将数据保存到服务器。例如：
```javascript
var user = Ext.create('AM.model.User', {
name: 'John Doe',
email: 'john@example.com'
});
user.save({
success: function (rec, op) {
console.log('Saved successfully.');
},
failure: function (rec, op) {
console.error('Failed to save.');
}
});
```
#### 八、保存到服务器端
为了确保数据能够在服务器端持久化，我们需要通过Model与服务器进行通信。这通常涉及到发送HTTP请求，并处理服务器返回的结果。
##### 8.1 实现服务器端交互
为了实现数据的持久化，我们需要在服务器端编写相应的接口。例如，可以使用PHP、Java或Node.js等技术来实现服务器端逻辑。
```javascript
// 假设服务器端有一个处理POST请求的接口
var user = Ext.create('AM.model.User', {
name: 'John Doe',
email: 'john@example.com'
});
user.save({
success: function (rec, op) {
console.log('Saved successfully.');
},
failure: function (rec, op) {
console.error('Failed to save.');
}
});
```
通过上述步骤，我们可以构建出一个功能完善的Extjs 4.2.0 MVC应用程序。这种架构不仅能够有效地组织代码，还极大地提高了开发效率和代码的可维护性。
- 1
- 2
- 3
前往页