【转】EXT JS MVC开发模式
原文链接：EXT JS MVC开发模式
在app(亦即根目录)文件夹下面创建controller、model、store和view文件夹，从名称上就知道他们该放置什么代码了吧。然后创建Application.js作为我们程序的入口文件，并在mvc.html中引用Application.js文件。
目录结构
-->app(根目录)
------>controller
------>model
------>store
------>view
------>application.js(与controller等同级目录)
创建model(实体类)
在model文件夹下面，创建user.js文件
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
});
创建store
虽然store不是mvc中必须的步骤，但是作为数据仓库，store起到了数据存取的作用，grid、form等展现的数据都是通过store来提供的，因此store在extjs mvc开发模式中是必不可少的
//app/store/user.js 的代码如下
Ext.define("MyApp.store.User", {
extend: "Ext.data.Store",
model: "MyApp.model.User",
data: [
{ name: "Tom", age: 5, phone: "123456" },
{ name: "Jerry", age: 3, phone: "654321" }
]
});
创建view
为了实现列表和编辑功能，我们需要两个视图，分别是list和edit，那么view的结构如下：
app/view/user/List.js 对应我们的grid的定义，只不过将创建grid的实例改成了创建grid的扩展。
//app/view/user/List.js 代码如下：
Ext.define("MyApp.view.user.List", {
extend: "Ext.grid.Panel",
alias: 'widget.userlist',
store: "User",
initComponent: function () {
this.columns = [
{ text: '姓名', dataIndex: 'name' },
{ text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
{ text: '电话', dataIndex: 'phone' }
];
this.callParent(arguments);
}
});
//app/view/user/edit.js 代码如下：
Ext.define("MyApp.view.user.Edit", {
extend: "Ext.window.Window",
alias: "widget.useredit",
title: "编辑用户",
width: 300,
height: 200,
layout: "fit",
items: {
xtype: "form",
margin: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 60
},
items: [
{ xtype: "textfield", name: "name", fieldLabel: "姓名" },
{ xtype: "numberfield", name: "age", fieldLabel: "年龄" },
{ xtype: "textfield", name: "phone", fieldLabel: "电话" }
]
},
buttons: [
{ text: "保存", action: "save" }
]
});
主入口
Ext.application({
name: "MyApp",
appFolder: 'app',
controllers: ["User"],
autoCreateViewport: true,
launch: function () {
// 页面加载完成之后执行
}
});
说明：
● name: 应用程序名称
● appFolder:应用程序代码的目录，用来进行动态加载代码的
● controllers: 应用程序使用到的控制器
● autoCreateViewport:是否自动创建Viewport，默认为false，我们这里设置为true，当它被设置为true的时候，应用程序会自动创建Viewport，这个Viewport的定义在我们的app/view/viewport.js 中；如果为false的时候，我们需要在launch中手动创建相应的视图。
