一步一步使用Ext JS MVC與Asp.Net MVC 3開發簡單的CMS後台管理系統之使用者管理（1）

應用程式的基本架構已經搭建好了，現在要做的是完成一個個的功能模組。先從簡單做起，完成使用者管理模組，該模組主要功能是使用一個Grid顯示使用者資訊，並使用RowEditing進行使用者的編輯、添加操作。Grid的分頁則在Grid頂部使用分頁工具條實現，在工具條上還要添加3個按鈕用來添加使用者、刪除使用者和為使用者重設密碼。在Grid底部還將添加一個文字說明，說明內容為：雙擊使用者可進入編輯狀態，使用者密碼預設為“123456”。重設密碼可將使用者密碼重設為“123456”。

首先要做的是為使用者資訊建立一個模型，在Scripts\app\model目錄下建立一個名為User.js的檔案，然後添加以下模型定義代碼：

Ext.define('SimpleCMS.model.User', {

    extend:'Ext.data.Model',

    fields: [

    "id",

    { name: "Username", defaultValue:"newuser" },

            {name: "Email", defaultValue: "newuser@email.com" },

        { name: "Roles", defaultValue:"普通使用者" },

    { name: "Created", type:"date", dateFormat: "Y-m-d H:i:s", defaultValue: new Date() },

    { name: "LastLoginDate", type:"date", dateFormat: "Y-m-d H:i:s" },

        {name: "IsApproved", type: "bool", defaultValue: true }

    ],

   idProperty: "id"

 

});

 

Membership提供者中的欄位很多，在這裡只使用了使用者編號、使用者名稱、電子郵件、角色、建立日期、最後登入時間和是否禁用等7個欄位。這隻是一個樣本，並不一定要按照這樣去做，具體可根據自己需要修改。在欄位定義中，可看到，很多欄位都設定了defaultValue配置項，它的作用是在建立使用者的時候，會使用該配置項的值作為預設值。這是ExtJS 4新添加的模型的功能，相當實用。

模型定義好以後，就要定義了Store了。Store除了要定義使用者的外，因為要設定使用者角色，所以還要定義使用者角色的Store。先來定義使用者的Store，因為全部操作是在Grid內完成的，因而直接使用api配置項功能定義好列表、添加、刪除和編輯的地址，就可簡單的實現這些功能的提交操作了，相當的方便。其它要注意的地方好定義好reader的格式，以及writer的格式。在Scripts\app\store\目錄下建立Users.js檔案，並在檔案內添加如下代碼：

Ext.define("SimpleCMS.store.Users", {

    extend:'Ext.data.Store',

    model:'SimpleCMS.model.User',

   batchActions: false,

    autoLoad:true,

    proxy: {

        type:"ajax",

        api:{

           read: 'Users/List',

           destroy: 'Users/Delete',

           update: "Users/Edit",

           create: "Users/Add"

        },

       reader: {

           type: 'json',

           root: "data",

           messageProperty: "Msg"

        },

       writer: {

           type: "json",

           encode: true,

           root: "data",

           allowSingle: false

        }

    }

})

 

 

代碼中，設定了batchActions配置項為true，表示不實現大量操作，而是每當執行一個操作就提交資料。配置項autoLoad表示自動去載入資料，不需要手動去載入了。

在proxy中的api配置項，為4個操作固定好了提交地址，提交的都是Users控制器的方法。在render配置項中，固定了返回資料的格式，資料都必須在data關鍵字內，也就是root配置項定義的值，這個可根據自己的習慣定義。而錯誤資訊則在Msg關鍵字內。而在writer中，encode設定為true的作用就是使用習慣的提交方式提交資料，而不是以JSON流的方式提交，這個具體在筆者的書中有講述。配置項root的與reader的作用是一樣的，表示資料可通過讀取data關鍵字擷取。而配置項allowSingle的作用是提交的資料是否一個個提交，在這裡設定為false，表示不允許一個個提交，也就是所有修改過的資料都會一次提交，在data關鍵字內可取到。

接著為角色定義Store，在這裡為了簡單起見，就不從伺服器擷取角色資料了，直接定義在Store裡了。在Scripts\app\store\目錄下建立Roles.js檔案，並在檔案內添加如下代碼：

Ext.define("SimpleCMS.store.Roles", {

    extend:'Ext.data.ArrayStore',

    fields:["text"],

    data:[["普通使用者"],["系統管理員"]]

})

 

現在要為使用者管理編寫控制器，在Scripts\app\controller目錄下建立Users.js檔案，並添加控制器的基本定義：

Ext.define('SimpleCMS.controller.Users', {

    extend:'Ext.app.Controller',

 

    init: function () {

        this.control({

        });

    }

 

});

 

 

 

好了，現在要考慮控制器需要什麼了，因為它的視圖需要用到使用者模型和使用者及角色的Store，因而需要添加models配置項和stores配置項，代碼如下：

    models: [

        'User'

    ],

 

    stores: [

        'Users',

        'Roles'

    ],

 

視圖也是必不可少的，因而添加以下代碼：

    views: [

        'Users.View'

    ],

 

這裡要注意視圖類的名稱結構，代碼中使用了Users.View表示建立視圖時，要在\Scripts\app\view目錄下建立Users目錄，然後在建立View.js檔案。這個可根據自己需要建立，例如不想建立目錄，那麼視圖的名稱就直接使用UsersView。當項目小的時候，檔案不多，這樣命名沒有任何問題，但是如果是大項目，檔案很多，就要注意同名檔案問題，因而習慣使用目錄區分視圖是好的方法，是一個好的習慣。

因為要在主面板的標籤頁面板內添加視圖，因而需要引用標籤頁面板，因而要加入refs配置項，代碼如下：

    refs: [

        {ref: "UserPanel", selector: "#userPanel" }

    ],

 

代碼中，ref配置項會產生引用的方法，例如當前代碼，可通過getUserPanel擷取面板。而selector配置項就是面板的選取器了，在這裡使用它的id選擇。

現在，要考慮怎麼載入這個控制器了，並將視圖添加到面板了。在定義控制器時，都有1個init方法，在這裡可以執行一些初始化操作，因而可在這裡將視圖添加到面板，將init方法內的代碼修改如下：

    init: function () {

        var me = this,

           panel = me.getUserPanel(),

           view = Ext.widget("usersview");

       panel.add(view);

       me.control({

        });

    }

 

 

代碼調用的getUserPanel方法，就是refs配置項定義中自動產生的方法，通過該方法擷取面板後，將建立的使用者視圖通過add方法添加到面板就行了。

現在切換到主面板控制器MainPanel.js，在使用者管理的activate事件中，刪除console語句，調用getController方法載入控制器並調用控制器的init方法就行了，代碼如下：

'#userPanel': {

    activate:{

       single: true,

        fn:function (panel) {

           this.application.getController('Users').init();

        }

    }

}

 

餘下的就是建立視圖了，下文再說。