Extjs MVC開發模式詳解

標籤：功能   lis   strong   資料操作   asp.net   www   button   雙擊   course   

在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中親測可用！

本文由齊飛（[email protected]）原創，並發布在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            }        });    },    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的這段代碼。在這段代碼中：

1. 將定義好的model、store、view作為配置項添加到controller中，controller會載入這些檔案；
2. 在init方法中為view添加響應事件（這裡添加事件的方法是通過query方式擷取控制項並添加的，這也是為什麼要為view添加alias的原因）
3. 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中方便的找到他，為它的子控制項添加具體的操作。

Extjs MVC開發模式詳解