Extjs MVC开发模式详解-阿里云开发者社区

在JS的开发过程中，大规模的JS脚本难以组织和维护，这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题，在Extjs 4.x版本中引入了MVC开发模式，开始将一个JS（Extjs）应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使得大规模JS代码变得更加易于重用和维护；这就是Extjs MVC开发模式的初衷。

在官方给出的MVC例子中，我们可以看到一个简单的列表编辑功能，这篇文章就围绕这个功能进行详细的讲解，让我们一起来揭开Extjs MVC的神秘面纱！

本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！

本文由齐飞（youring2@gmail.com）原创，并发布在http://www.qeefee.com/article/extjs-mvc-in-detail，转载请注明出处！推荐更多Extjs教程、Extjs5教程

常规开发模式下的列表编辑功能实现

我们先来看一下这个例子，它的功能非常简单：在页面打开的时候加载一个列表，当双击列表中一行数据的时候打开编辑窗口，编辑完成之后点击保存按钮，然后更新列表。截图如下：

extjs-mvc-in-detail

在常规的开发模式下，要实现这个功能非常简单，代码如下：

Ext.onReady(function () {
    //1.定义Model
    Ext.define("MyApp.model.User", {
        extend: "Ext.data.Model",
        fields: [
            { name: 'name', type: 'string' },
            { name: 'age', type: 'int' },
            { name: 'phone', type: 'string' }
        ]
    });

    //2.创建store
    var store = Ext.create("Ext.data.Store", {
        model: "MyApp.model.User",
        data: [
            { name: "Tom", age: 5, phone: "123456" },
            { name: "Jerry", age: 3, phone: "654321" }
        ]
    });

    //3.创建grid
    var viewport = Ext.create("Ext.container.Viewport", {
        layout: "fit",
        items: {
            xtype: "grid",
            model: "MyApp.model.User",
            store: store,
            columns: [
                { text: '姓名', dataIndex: 'name' },
                { text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
                { text: '电话', dataIndex: 'phone' }
            ]
        }
    });

    //4.添加双击编辑
    var grid = viewport.down("grid");
    grid.on("itemdblclick", function (me, record, item, index, e, eopts) {
        //5.创建编辑表单
        var win = Ext.create("Ext.window.Window", {
            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: "保存", handler: function () {
                        win.down("form").updateRecord();
                        record.commit();
                        win.close();
                    }
                }
            ]
        });
        win.down("form").loadRecord(record);
        win.show();
    });
});

在这段代码中，我们用到了Model、Store、Grid，以及编辑的Window和Form。代码中已经给出了简单的注释，这不是今天重点要介绍的。

Extjs MVC开发模式

假设你从来没有接触过Extjs MVC开发模式，但是你知道ASP.NET MVC、或者别的任何语言下的MVC开发模式，那么我们来试想一下Extjs下的MVC该是什么样子？

JS是需要在html页面中运行的，所以它要有一个宿主页面
它要有Model、View和Controller三层，这是MVC的基础，如果缺少了这三层，那还叫什么MVC呢？
这个JS程序可能需要有一个入口，因为JS不像ASP.NET那样根据URL来分配Controller和Action

好了，我们暂时想到了这么多，那么在实际的Extjs MVC开发过程中是什么样子呢？我们来看一下目录结构：

第一步，创建入口页面

创建一个html页面，我们使用mvc.html页面，在这个页面的同一个目录，我们创建一个app的文件夹，在这个文件夹下面用来放置js代码。mvc.html就是我们的程序宿主页面。

第二步，创建目录结构

在app文件夹下面创建controller、model、store和view文件夹，从名称上就知道他们该放置什么代码了吧。然后创建Application.js作为我们程序的入口文件，并在mvc.html中引用Application.js文件。

第三步，创建model

在model文件夹下面，创建user.js文件：

这个文件将存放我们的model，我们可以直接把最上面定义model的代码赋值到这里面。

app/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 对应我们的window的定义，但同样是通过扩展的形式来实现的。

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" }
    ]
});

注意：对于view类的创建，我们需要定义alias，这是为了方便我们通过xtype来创建该组件的实例。（如果没有alias，我们将很难在viewport和controller中使用 —— 这是我爬过的坑！）

第六步，创建controller

controller作为连接model、store和view的桥梁，在mvc开发模式中起到了至关重要的作用。如果说model定义了数据模式、store提供了数据存取的方法、view用来展示数据，那么controller将用来控制具体的数据操作。

app/controller/user.js 的代码如下：

Ext.define('MyApp.controller.User', {
    extend: 'Ext.app.Controller',
    stores: ['User'],
    models: ['User'],
    views: ['Viewport', 'user.List', 'user.Edit'],
    init: function () {
        this.control({
            'userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.saveUser
            }
        });
    },
    editUser: function (grid, record) {
        var win = Ext.widget("useredit"); 
        win.down("form").loadRecord(record);
        win.show();
    },
    saveUser: function (btn) {
        var win = btn.up("window"),
            form = win.down("form"),
            record = form.getRecord();
        form.updateRecord();
        record.commit();
        win.close();
    }
});

我们来详细的说一下controller的这段代码。在这段代码中：

将定义好的model、store、view作为配置项添加到controller中，controller会加载这些文件；
在init方法中为view添加响应事件（这里添加事件的方法是通过query方式获取控件并添加的，这也是为什么要为view添加alias的原因）
editUser方法和saveUser方法则是具体的操作内容

有了这些步骤，我们就将model、store、view联系在一起了。然后，我们进入Application.js文件中，完善我们的入口页面。

第七步，完善Application.js文件

在很多时候，Application.js文件也被简单的命名为app.js，它们的作用是一样的，为应用程序提供一个入口。它可以很简单，我们的Application.js文件代码如下：

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

第八步，Viewport.js的定义

Viewport作为我们应用程序的视图面板，可以被单独的定义在一个Viewport.js文件中。它的定义也很简单，通常用来将一个或多个view作为它的子控件。

app/view/viewport.js 代码如下：

Ext.define("MyApp.view.Viewport", {
    extend: "Ext.container.Viewport",
    layout: "fit",
    items: {
        xtype:"userlist"
    }
});

完成这些步骤之后，我们可以运行mvc.html来查看效果。

总结

Extjs MVC开发模式为我们提供了一个完善的代码组织和维护的方向，它的出发点是好的，但是在实际的操作过程中，我们会发现这种模式过于繁琐，这可能是由于我们的示例太过于简单而造成的。

Extjs MVC的Model、Store、View、Controller各层的代码都是通过Ext.define来创建类的形式完成的，因此在使用Extjs MVC之前，我们需要对Extjs的类系统有一定的认识，包括如何使用Ext.define自定义类。

对于View层的控件，我们需要为它们指定一个alias属性，方便通过xtype创建对象，并可以在Controller中方便的找到他，为它的子控件添加具体的操作。

本文由齐飞（youring2@gmail.com）原创，并发布在起飞网（http://www.qeefee.com）

原文地址：http://www.qeefee.com/article/extjs-mvc-in-detail

更多Extjs教程、Extjs5教程请关注起飞网！

本文转自齐师傅博客园博客，原文链接：http://www.cnblogs.com/youring2/p/3979777.html，如需转载请自行联系原作者

Extjs MVC开发模式详解

常规开发模式下的列表编辑功能实现

Extjs MVC开发模式

第一步，创建入口页面

第二步，创建目录结构

第三步，创建model

第四步，创建store

第五步，创建view

第六步，创建controller

第七步，完善Application.js文件

第八步，Viewport.js的定义

总结

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Extjs MVC开发模式详解

常规开发模式下的列表编辑功能实现

Extjs MVC开发模式

第一步，创建入口页面

第二步，创建目录结构

第三步，创建model

第四步，创建store

第五步，创建view

第六步，创建controller

第七步，完善Application.js文件

第八步，Viewport.js的定义

总结

热门文章

最新文章

相关电子书