现在,创建视图,在Scripts\app\view目录下先创建目录Users,然后在该目录下创建View.js。要使用Grid显示用户信息,因而要从Grid面板派生出视图。定义的时候要注意视图的类名。还有就是一定要定义别名,因为在控制器中是使用widget方法创建的视图实例。如果不想定义别名,那就要修改创建实例的方式。具体的基本定义代码如下:
Ext.define('SimpleCMS.view.Users.View',{
extend: 'Ext.grid.Panel',
alias: 'widget.usersview',
title: "用户管理",
id: "usersView",
initComponent: function () {
var me = this;
me.callParent(arguments);
}
});
代码中的id可根据需要定义,在这里是不管有没有用,先定义。如果项目类太多,要注意避免id冲突。标题定义可有可无,因为是在标签页内,看自己需要。
Grid需要Store,因而先添加store配置项,使用的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”。"]
好了,视图的雏形已经出来了,可以调试一下效果了。在浏览器打开页面,并使用admin登录,切换到用户管理标签页将看到如图21所示的效果。
图21 没有设置好布局的用户管理视图
是不是觉得有点奇怪,底部工具栏居然在Grid的标题栏下。对于笔者来说,看到这情况就知道是布局没设置好造成Grid主体部分高度为0。对于新手,要调试原因也不难,尤其是现在有Illuminations插件,在Firebug中将面板切换到Illuminations面板,然后单击点选按钮,然后单击视图的标题栏,会在Firebug看到如图22所示的效果。
图22 在Illuminations面板找到对象
在元素右边的路径上,单击图中黄色高亮部分的视图,然后如图23那样把鼠标移动到视图对象上,将看到页面中,视图部分用红色边框圈起来了,这说明视图并没有填满整个标签页主体,说明标签页的布局出问题了。在VS中切换到主面板视图(MainPanel.js),在添加用户管理面板的地方加入以下代码:
图23 查看视图的位置
使用Fit布局后,视图就可填满标签页面板主体了,现在刷新一下页面,切换到用户管理标签页,就可看到如图24所示的正确的效果了。
图24 正确的视图显示
现在,在服务器端创建Users控制器,为Grid提供数据。在Controllers目录创建一个名称为UsersController的控制器。加入必要的引用后,将Index方法修改为List方法,返回结果为JObject,代码如下:
使用Membership提供者的GetAllUsers就可进行分页,唯一问题是不能进行排序,在这里就不做处理了。还有个要注意的地方就是角色返回的必须是数组形式,不然在为Combobox设置值的时候会出问题。
现在要返回的数据结构是这样的:
{
success : true or false,
total: 记录总数,
Msg: 错误信息,
data: 由当前页记录组成的数组
}
结构中,success表示返回结果是否成功。如果不成功,可通过Msg获取错误信息。如果成功,就从data中读取数据。结构中的total非常重要,客户端会根据该值来计算页数,所以一定要正确返回,不然分页就会乱。
在之前MyFunction类中创建WriteJObjectResult方法要适应该结构,就要加参数,不过重载该方法,也是不错的选择,代码如下:
publicstatic JObject WriteJObjectResult(bool success, int total,string message,JArray data)
{
return new JObject {
newJProperty("success",success),
new JProperty("total",total),
new JProperty("Msg",message),
new JProperty("data",data)
};
}
好了,现在可以完成List方法的代码了,代码如下:
publicJObject List()
{
try
{
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 inMembership.GetAllUsers(page - 1, pagesize, out total))
{
string[] rolesForUser =Roles.GetRolesForUser(c.UserName);
ja.Add(new JObject {
newJProperty("id",c.ProviderUserKey),
newJProperty("Username",c.UserName),
newJProperty("Email",c.Email),
newJProperty("IsApproved",c.IsApproved),
newJProperty("LastLoginDate",c.LastLoginDate.ToString("yyyy-MM-ddhh:mm:ss")),
newJProperty("Created",c.CreationDate.ToString("yyyy-MM-ddhh:mm:ss")),
newJProperty("Roles",new JArray(rolesForUser.Select(m=>m)))
});
}
returnMyFunction.WriteJObjectResult(true, total, "", ja);
}
catch (Exception e)
{
returnMyFunction.WriteJObjectResult(false, 0, e.Message, null);
}
}
上面代码,第一个要注意的是GetAllUsers方法中,分页居然是从0开始算第一页。第二个要注意的是使用GetRolesForUser方法根据用户名返回的角色是字符串数组,然后通过LINQ就可直接将它转换为JSON数组。其它代码没太大难度,不明白的可直接发邮件或留言给我。
为了防止意外情况,这里添加了try模块,在错误的时候会将错误信息作为Msg关键字的值返回。至于是否需要这样直接返回错误信息,这还是得根据项目或自己喜好去决定了。
而在客户端脚本,目前是没有处理错误信息的代码的,因而在这里返回的错误信息,客户端是看不到。如果要处理这样的错误信息,就要在Store的Proxy中监听exception事件。因为exception事件的回调函数是一致的,因而可以统一到一个函数中处理,就不用复制再复制了。
先切换到Index.cshtml,在Ext.ns下添加以下代码定义处理exception事件的回调:
SimpleCMS.ProxyException = function (proxy,response, opts) {
Ext.Msg.alert("错误信息",opts.error);
}
在exception事件的回调函数的第三个参数返回的是Operation对象,当success为false时,它会将Msg关键字的值复制到对象的error属性,因而直接调用该属性就可获得错误信息了。在这里要处理的意外情况其实还有很多,如服务器没有返回数据、响应延时等等,在这里就不一一列举了,大家可根据API的说明完善该函数。
接着,切换到Users的Store,在proxy定义内添加listeners配置项来监听exception事件,代码如下:
listeners:{
exception :SimpleCMS.ProxyException
}
或许会有人问,为什么不在控制器中为proxy写监听代码?这……笔者确实不知道怎么回答,还是老规矩,个人喜好吧。笔者认为,把什么东西都往控制器中塞,是否有这样的必要,代码是否真的这样就容易维护?这问题展开来估计又是骂战,还是根据个人喜好选吧!
要测试exception事件是否能正常执行,在pagesize的定义代码前添加以下代码抛出一个异常:
throw new Exception("发生错误了。");
重新生成一下解决方案,然后刷新页面,切换到用户管理将看到如图25所示的错误信息,说明监听代码运作正常。
图25 exception事件显示的错误信息
把抛出异常代码删除,然后再编译一下。在浏览器中关闭对话框,然后单击分页工具栏的刷新按钮,就可看到如图26所示的数据了。
用户数据列表已经完成了,余下就是完成添加、编辑、删除和重置密码操作了,这个,下文再说。
源代码下载:http://download.csdn.net/detail/tianxiaode/4600348
分享到:
相关推荐
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(2)源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(2) 源代码
《一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目》的项目文件
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(4) 源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(1)
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据库文件
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口调试代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(3) 源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之调整首页显示
ext asp.net mvc nhibernate 完整项目示例
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...
本资源为学习asp.net mvc+ext js的用户提供一个简单的增、删、改功能。通过此例子对MVC和Ext js有一个初步的认识,压缩包内的mvcStudent.sql为数据库脚本。
extasp.net 是个不错的asp.net 源码,mvc+ext+三层架构
Ext.Direct.Mvc是ASP.NET Mvc.的Ext Direct服务器端堆栈的实现.zip
可以快速上手开发企业的信息管理系统,也可提供oracle 11g版本框架非常适合二次开发人员使用, 强烈推荐一下,感兴趣的欢迎下载看看啊。 二、框架简介 1、数据持久层使用IBatis.Net ORM 映射框架, 提供了较为灵活...
本源代码包来源于Ext.NET官方网站,于2012-07-24日发布,可以用Visual Studio 2010打开后进行编译,但需要先安装ASP.NET MVC3。此源代码包目前官网上已经没有下载了!目前官网的最新版本是2.1.1,但是有BUG。 本源...
程序结构是asp.net MVC,使用EXT3.1,从服务器端读取数据 运行前先建一个ext3.1的虚拟目录 说明:treegrid中数据的关系: RoleType表: RoleTyptID RoleTypeName 1 系统管理 2 管理员 Role表: RoleID ...
Quickly Build Rich AJAX Enabled Web Applications For ASP.NET Ext.NET is an open source ASP.NET (WebForm + MVC) component framework integrating the cross-browser Sencha Ext JS JavaScript Library
在ASP.NET mvc模式下使用Extjs搭建的框架页面代码