應用程序的基本框架已經搭建好了，現在要做的是完成一個個的功能模塊。先從簡單做起，完成用戶管理模塊，該模塊主要功能是使用一個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: "[email protected]" },
{ 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();
}
}
}
餘下的就是創建視圖了，下文再說。
