EXT JS MVC开发模式

Posted 2020-08-16 JillWen

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中手动创建相应的视图。