一步一步使用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();
}
}
}
余下的就是创建视图了,下文再说。
转载于:https://www.cnblogs.com/hainange/archive/2012/09/25/6334241.html
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(1)...相关推荐
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口调试...
现在可以对登录窗口进行调试了. 打开系统的首页页面文件,Views\Home目录下的Index.cshtml文件.要动态加载登录窗口,需要先设置好加载路径,因而在onReady函数上加入以下代码: E ...
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目
打开VS2010,在主菜单选择文件,新建,项目,在如图1所示的弹出窗口中已安装的模板下选择C#的Web模板,然后选择"ASP.NET MVC 3 Web应用程序",将项目名称修改为 ...
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之完成登录功能...
登录窗口已经完成了,现在可以完成最后的工作了,主要就是完成Membership提供者的配置. 首先打开Web.Config文件,在configuration段内添加一个数据库连接定义,代码如下: &l ...
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
本管理系统的数据库采用SQL Server2005,主要有T_Category.T_Content.T_Tag和T_TagInContent这4个表.为了简单起见,用户验证功能等将使用Membersh ...
- 开发陪玩游戏源码的后台管理系统,登录的实现是第一步!
在开发陪玩游戏源码时,不仅需要开发Android端和iOS端,还需要开发服务端,也就是后台管理系统,由于后天管理系统掌控者用户端的陪玩游戏源码使用效果,所以非常重要,今天我们先来了解一下号后台管理系统 ...
- 七天来学习ASP.NET MVC (两)——ASP.NET MVC 数据传输
通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上.因此须要确保您是否掌握了上一节的内容. 本章的目标是在今天学习结束时利用最佳实践解决方式创建一个小型的M ...
- 返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API
返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API 原文:返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 ...
- 基于Ext JS的模块化应用框架搭建及开发
Ext JS模块化开发 早期基于Ext JS的Web开发方式,是在HTML中引入JS和CSS文件,典型的就是引入 ext-all.js 这样的文件.ext all 包含的内容很多, 有基本的核心组件. ...
- 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递
通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上,因此需要确保您是否掌握了上一节的内容.本章的目标是在今天学习结束时利用最佳实践解决方案创建一个小型的MV ...
最新文章
- 基于K8S构建企业级Jenkins CI/CD平台实战(三) 之 带你实战Spring boot/Cloud 项目 CI/CD jenkins自动化构建、部署过程
- 计算机控制系统的理论,计算机控制系统理论基础.pptx
- 开发者盛宴!Apache HBasecon 峰会来北京了,速来免费报名
- java-HashMap源码学习
- 【转】C++ Vector用法深入剖析
- Python heapq模块
- cgo 调用dll Failed to load xxxxx.dll: The specified module could not be found.
- 【Flink】Flink 写入 AnalyticDB MySQL
- 对于algorithm102的总结
- 使用CODERUN部署阿里云KUBERNETES
- 全球名校AI课程库(23)| Harvard哈佛 · 基于Python/JavaScript的Web编程课程『Web Programming with Python and JavaScript』
- 模拟飞机票订票系统设计心得
- .NET Interop 互操作 COM+
- 计算机硬件更新快,频繁更新电脑硬件驱动程序到底好不好?真相在此
- 全球地名中英文对照表(Q-R)
- java 点阵打印机_Linux上点阵打印机的Java打印质量
- 庆生二十年 2018爱普生创新大会在京举行
- 有趣的串口--之超级终端的玩法-2[转]
- zeroTier实现内网穿透-moon服务搭建
- java字符串转数组遍历,深入分析