原文 http://www.cnblogs.com/aehyok/archive/2013/04/25/3043757.html
首先要做的是为用户信息创建一个模型，在Scripts\app\model目录下创建一个名为User.js的文件，然后添加以下模型定义代码：
Ext.define('ExtMVCOne.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("ExtMVCOne.store.Users", { extend: 'Ext.data.Store', model: 'ExtMVCOne.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("ExtMVCOne.store.Roles", { extend: 'Ext.data.ArrayStore', fields: ["text"], data: [["普通用户"], ["系统管理员"]] })
现在要为用户管理编写控制器，在Scripts\app\controller目录下创建Users.js文件，并添加控制器的基本定义：
Ext.define('ExtMVCOne.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事件中，删除alert语句，调用getController方法加载控制器并调用控制器的init方法就行了，代码如下：
'#userPanel': { activate: { single: true, fn: function (panel) { //Ext.Msg.alert("提示信息", panel.title); this.application.getController('Users').init(); } } }
现在，创建视图，在Scripts\app\view目录下先创建目录Users，然后在该目录下创建View.js。要使用Grid显示用户信 息，因而要从Grid面板派生出视图。定义的时候要注意视图的类名。还有就是一定要定义别名，因为在控制器中是使用widget方法创建的视图实例。如果 不想定义别名，那就要修改创建实例的方式。具体的基本定义代码如下：
代码中的id可根据需要定义，在这里是不管有没有用，先定义。如果项目类太多，要注意避免id冲突。标题定义可有可无，因为是在标签页内，看自己需要。
Grid需要Store，因而先添加store配置项，使用的Store是Users，因而定义代码如下：
store: "Users",
列的定义，可以直接使用配置项定义，也可以在initComponent方法内定义，具体看情况，例如当前例子，要为列添加编辑组件，因而在initComponent方法内定义比较合适，代码如下：
me.columns = [ { text: '用户名', dataIndex: 'Username', flex: 1 }, { text: '电子邮件', dataIndex: 'Email', flex: 1 }, { text: '角色', dataIndex: 'Roles', flex: 1 }, { xtype: "datecolumn", text: '创建时间', dataIndex: 'Created', format: "Y-m-d H:i:s", width: 150 }, { xtype: "datecolumn", text: '最后登录时间', dataIndex: 'Created', format: "Y-m-d H:i:s", width: 150 }, { xtype: 'checkcolumn', dataIndex: "IsApproved", text: "允许登录", winth: 150 } ]
现在定义都是一些基础代码，还没定义编辑组件，这样有个好处，先调试好显示，再进入下一阶段，可以减少错误。在最后一个字段，使用了扩展 CheckColumn，因而要在Ext包中将CheckColumn.js文件复制到Ext\ux目录下，并添加requires配置项，代码如下：
requires:["Ext.ux.CheckColumn"],
接着要在顶部工具栏添加一个分页工具条，代码如下：
me.tbar = { xtype: "pagingtoolbar", pageSize: 50, displayInfo: true, store: me.store }
这里设置了每页显示的记录数为50条记录，可根据自己情况做调整。
最后要在底部工具栏添加一段说明文字，代码如下：
me.bbar = ["双击用户可进入编辑状态，用户密码默认为“123456”。重置密码可将用户密码重置为“123456”。"]
F5运行即可看到
现在还没有数据，而且我们添加的bbar紧贴在了Grid下面，说明了标签页的布局有点小问题，那就在VS中切换到主面板视图（MainPanel.js），在添加用户管理面板的地方加入以
下代码：
layout:
"fit"
|
再刷新一下页面
现在，在服务器端创建Users控制器，为Grid提供数据。在Controllers目录创建一个名称为UsersController的控制器。加入必要的引用后，将Index方法修改为List方法，返回结果为JObject，代码如下：
public JObject List() { try { //throw new Exception("发生错误了。"); int pagesize = 50; int page = 0; int.TryParse(Request["page"], out page); if (page <= 0) page = 1; int total = 0; JArray ja = new JArray(); foreach (MembershipUser c in Membership.GetAllUsers(page - 1, pagesize, out total)) { string[] rolesForUser = Roles.GetRolesForUser(c.UserName); ja.Add(new JObject { new JProperty("id",c.ProviderUserKey), new JProperty("Username",c.UserName), new JProperty("Email",c.Email), new JProperty("IsApproved",c.IsApproved), new JProperty("LastLoginDate",c.LastLoginDate.ToString("yyyy-MM-dd hh:mm:ss")), new JProperty("Created",c.CreationDate.ToString("yyyy-MM-dd hh:mm:ss")), new JProperty("Roles",new JArray(rolesForUser.Select(m=>m))) }); } return MyFunction.WriteJObjectResult(true, total, "", ja); } catch (Exception e) { return MyFunction.WriteJObjectResult(false, 0, e.Message, null); } }
同时要在MyFunction中添加相应的方法，代码如下：
public static JObject WriteJObjectResult(bool success, int total, string message, JArray data) { return new JObject { new JProperty("success",success), new JProperty("total",total), new JProperty("Msg",message), new JProperty("data",data) }; }
现在再来运行一下，然后用admin登录后可查看到
数据就这样出来了哦。
