一步一步使用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/muyuge/archive/2012/09/25/6333749.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/576242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ 常量引用

#include<iostream> #include<string> using namespace std;int main() {//常量引用//使用场景:用来修饰形参&#xff0c;防止误操作//int a 10;//加上const之后编译器将代码修改int temp 10; const int & ref temp; const int & ref 10;//引用必须引一…

高速pcb设计指南 1~8

http://bbs.ednchina.com/FORUM_POST_15_21830_0.HTM转载于:https://www.cnblogs.com/tureno/articles/2706904.html

C++ 函数参数的默认值和占位参数

3.2函数占位参数 C中函数的形参列表里可以有占位参数&#xff0c;用来做占位&#xff0c;调用函数时必须填补该位置 语法:返回值类型 函数名(数据类型){} 在现阶段函数的占位参数存在意义不大&#xff0c;但是后面的课程中会用到该技术 #include< iostream> using names…

Oracle递归查询

网上摘录。 一、树型表结构&#xff1a; 节点ID 上级ID 节点名称 二、公式&#xff1a; select 节点ID,节点名称,level from   表 connect by prior 节点ID上级节点ID start with 上级节点ID节点值 说明&#xff1a; 1、常见的树形结构为公司组织机构、地区…… 2、求节点I…

C++ 函数重载碰到默认的参数

#include<iostream> #include<string> using namespace std;//引用作为重载的条件 void func(int &a) { //非常量引用cout << " this is func" << endl; }void func(const int &a) { // 常量引用 const int &a 10; 合…

wzplayer for android V1.0快出炉了

关注我博客的朋友&#xff0c;发现我很久没有写博客了&#xff0c;因为最近在忙wzplayer 跨平台的事情,前些天在忙wzplayer 的opencv,opengles渲染的事情&#xff0c;最近正式在为wzplayer for android编译折腾.工作将接近尾声. 等待的朋友不要着急&#xff0c;wzplayer for an…

2.Java内存回收机制

一、Java对象在内存引用状态 内存泄露&#xff1a;程序运行过程中&#xff0c;会不断分配内存空间&#xff0c;那些不再使用的内存空间应该即时回收它们&#xff0c;从而保证系统可以再次使用这些内存&#xff0c;如果存在无用的内存没有被回收回来&#xff0c;这就是内存泄漏.…

C++ 对象的初始化和清理

4.2对象的初始化和清理 ●生活中我们买的电子产品都基本会有出厂设置,在某-天我们不用时候也会删除一些自己信息数据保证安全 ●C中的面向对象来源于生活&#xff0c;每个对象也都会有初始设置以及对象销毁前的清理数据的设置。 4.2.1构造函数和析构函数 对象的初始化和清理也是…

VMware-workstation-full-8.0.0-471780.exe

下载地址&#xff1a;http://115.com/file/bhzruvd6完美汉化补丁&#xff1a;http://115.com/file/clq88zcuVMware Workstation 8.0_HA_V3 .exe文件大小&#xff1a;80466532 字节文件版本&#xff1a;8.0.0.471780修改时间&#xff1a;2011年9月24日 10:45:09MD5 &#xff1a;…

查找当前地形位置上的贴图信息

http://answers.unity3d.com/questions/34328/terrain-with-multiple-splat-textures-how-can-i-det.html转载于:https://www.cnblogs.com/klobohyz/archive/2012/10/09/2716627.html

C++ 深拷贝与浅拷贝

#include<iostream> using namespace std; #include<string>class Person {public:Person() {cout << "Person的无参构造函数调用" << endl;};Person(int age) {m_Age age;cout << "Person的有参构造函数调用" << en…

转载]Cyclone II JTAG ASP 配置下载程序

原文&#xff1a;http://blog.sina.com.cn/s/blog_4739958a0100irp7.html 首先&#xff0c;还是那句话&#xff0c;电脑上写好程序.pof文件直接通过JTAG写到FPGA SRAM里&#xff0c;掉电丢失。 只有把.pof写到串行配置器件上&#xff0c;板子上电后串行配置器件EPCS4将程序自动…

C++ 类和对象成员特性

//当类中成员是其他类对象时&#xff0c;我们称该成员为对象成员 //构造的顺序是:先调用对象成员的构造&#xff0c;再调用本类构造 //析构顺序与构造相反 #include <iostream> using namespace std; #include <string>class Phone{public:Phone(string name){m_P…

android surfaceview 清屏

引用&#xff1a;http://www.eoeandroid.com/forum.php?modviewthread&tid40776 12楼 清屏可以用橡皮擦的画笔画一个屏幕大小的矩形就可以了//这是定义橡皮擦画笔Paint clearPaint new Paint();clearPaint.setAntiAlias(true);clearPaint.setXfermode(new PorterDuffX…

C++ 静态成员

静态成员就是在成员变量和成员函数前加上关键字static,称为静态成员 静态成员分为: ●静态成员变量 。所有对象共享同一份数据 。在编译阶段分配内存 。类内声明&#xff0c;类外初始化 ●静态成员函数I 。所有对象共享同一个函数 。静态成员函数只能访问静态成员变量 #include…

ScaleGestureDetector使用注意事项

注&#xff1a;一定要通过view的onTouchEvent调用mScaleGestureDetector.onTouchEvent(ev);&#xff0c;只有这样 才能调用回调函数&#xff1a;onScaleBegin 具体可以参加&#xff1a;android源码&#xff1a;KenBurnsActivity.java 下面是转载的文章&#xff1a; Detects tra…

C++ 静态成员函数

#include <iostream> using namespace std; #include <string>class Person{public://静态成员函数特点://1程序共享一个函数//2静态成员函数只能访问静态成员变量static void func(){cout << "func调用" << endl;m_A 100;//m. _B 100; //…

提高编写CSS代码效率的10个习惯

提高编写CSS代码效率的10个习惯1、保持一贯性。 就像其它的任何事一样&#xff0c;值得一直保持一贯性。保持连贯性&#xff0c;而不是想到什么就给id和class命名什么。 CSS的级联样式有利于加深你的记忆&#xff0c;而且充分利用样式的继承去设置样式表。 首先声明通用的部分的…

hdu 1257 最少拦截系统 (DP)

点击打开链接 #include"stdio.h" int main() {int a[10011],b[10011];int i,j,c,n;while(scanf("%d",&n)!EOF){c1;for(i0;i<n;i)scanf("%d",&a[i]);b[0]a[0];for(i1;i<n;i){for(j0;j<c;j){if(a[i]<b[j])break;}b[j]a[i];if(…