ExtJs九 ExtJs Mvc使用者管理之一

ext.define('
extmvcone.model.user
', ,,,
,,],idproperty: "id
"});

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

ext.define("
extmvcone.store.users
", ,
reader: ,
writer: }})

**中，設定了batchactions配置項為true，表示不實現批量操作，而是每當執行乙個操作就提交資料。配置項autoload表示自動去載入資料，不需要手動去載入了。

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

ext.define("
extmvcone.store.roles
", )

ext.define('
extmvcone.controller.users
', );
}});

好了，現在要考慮控制器需要什麼了，因為它的檢視需要用到使用者模型和使用者及角色的store，因而需要新增models配置項和stores配置項，**如下：

models: [
'user'],
stores: [
'users',
'roles
'],

檢視也是必不可少的，因而新增以下**：

views: [
'users.view
'],

因為要在主面板的標籤頁面板內新增檢視，因而需要引用標籤頁面板，因而要加入refs配置項，**如下：

refs: [
],

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

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

init: function () );
}

**呼叫的getuserpanel方法，就是refs配置項定義中自動生成的方法，通過該方法獲取面板後，將建立的使用者檢視通過add方法新增到面板就行了。

現在切換到主面板控制器mainpanel.js，在使用者管理的activate事件中，刪除alert語句，呼叫getcontroller方法載入控制器並呼叫控制器的init方法就行了，**如下：

'
#userpanel': }}

**中的id可根據需要定義，在這裡是不管有沒有用，先定義。如果專案類太多，要注意避免id衝突。標題定義可有可無，因為是在標籤頁內，看自己需要。

grid需要store，因而先新增store配置項，使用的store是users，因而定義**如下：

store: "

users

列的定義，可以直接使用配置項定義，也可以在initcomponent方法內定義，具體看情況，例如當前例子，要為列新增編輯元件，因而在initcomponent方法內定義比較合適，**如下：

me.columns =[,,
,,,]

現在定義都是一些基礎**，還沒定義編輯元件，這樣有個好處，先除錯好顯示，再進入下一階段，可以減少錯誤。在最後乙個字段，使用了擴充套件checkcolumn，因而要在ext包中將checkcolumn.js檔案複製到ext\ux目錄下，並新增requires配置項，**如下：

requires:["
ext.ux.checkcolumn
"],

接著要在頂部工具欄新增乙個分頁工具條，**如下：

me.tbar =

這裡設定了每頁顯示的記錄數為50條記錄，可根據自己情況做調整。

最後要在底部工具欄新增一段說明文字，**如下：

me.bbar = ["

雙擊使用者可進入編輯狀態，使用者密碼預設為「123456」。重置密碼可將使用者密碼重置為「123456」。

f5執行即可看到

現在還沒有資料，而且我們新增的bbar緊貼在了grid下面，說明了標籤頁的布局有點小問題，那就在vs中切換到主面板檢視（mainpanel.js），在新增使用者管理面板的地方加入以

下**：

layout:"fit"

再重新整理一下頁面

現在，在伺服器端建立users控制器，為grid提供資料。在controllers目錄建立乙個名稱為userscontroller的控制器。加入必要的引用後，將index方法修改為list方法，返回結果為jobject，**如下：

public
jobject list());}
return myfunction.writejobjectresult(true, total, ""
, ja);
}catch
(exception e)
}

同時要在myfunction中新增相應的方法，**如下：

public
static jobject writejobjectresult(bool success, int total, string
message, jarray data);}

現在再來執行一下，然後用admin登入後可檢視到

資料就這樣出來了哦。

ExtJs九 ExtJs Mvc使用者管理之一

extjs4 TreePicker下拉樹用法

ExtJS4學習筆記九多表頭Grid

用Python複製檔案的九種方法

ExtJs九 ExtJs Mvc使用者管理之一

extjs4 TreePicker下拉樹用法

ExtJS4學習筆記 九 多表頭Grid

用Python複製檔案的九種方法

相關推薦

ExtJS4學習筆記九多表頭Grid