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该是什么样子？

1. JS是需要在html页面中运行的，所以它要有一个宿主页面
2. 它要有Model、View和Controller三层，这是MVC的基础，如果缺少了这三层，那还叫什么MVC呢？
3. 这个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            }        });    },    edit