ExtJs九(ExtJs Mvc用户管理之一)

首先要做的是为用户信息创建一个模型,在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登录后可查看到

数据就这样出来了哦。

示例代码下载链接http://files.cnblogs.com/aehyok/ExtJsUserView.rar

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

前端知识普及之页面加载

如果大家想继续看下面的内容的话,有一个要求,就是回答我一个问题: 你这样写过代码吗? window.onload = function(){ $(".g...

3659
来自专栏程序员互动联盟

【专业技术】Linux下如何提高效率

之前写了一篇关于linux下常用的几个命令,参考Linux入门--提高工作效率的命令 一、bash shell中的快捷键 光标移动命令 Ctrl + a - 跳...

3617
来自专栏全沾开发(huā)

如何从0开发一个Atom组件

如何从0开发一个Atom组件 最近用Atom写博客比较多,然后发现一个很严重的问题。。 没有一个我想要的上传图片的方式,比如某乎上边...

3645
来自专栏张戈的专栏

解决WordPress升级4.2后调用国外图片导致大量404请求的问题

前几天就收到 WordPress 官方发来的预更新通知,告诉我本周会更新到 4.2。果然,昨天就收到了更新推送消息,随手就点击升级了,前台打开看了下没有看到明显...

35910
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(二十四):全局页面配置

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

2573
来自专栏pangguoming

C# WCF 完整实例,winform 窗体作为 宿主

上一次提到,我们的WCF程序宿主是发布到IIS上面的。虽然这样做未尝不可,不过不便于我们进行“开始”或“停止”WCF服务的操作。所以再次尝试了编写以窗体应用程序...

5344
来自专栏小程序容器

OpenApplus小程序容器

OpenApp+ (https://www.openapplus.com)一个小程序容器,配置简单、功能完善、界面流畅、开箱即用!使用OpenApp+可以快速扩...

5389
来自专栏贺贺的前端工程师之路

React-Native 遇到的错误1. React-Native 部分组件在debug模式下打包在iOS真机上可以显示,但是release模式下打包在iOS真机上不显示2. React-Native

这段代码在release包的情况是,buttons是空的,是由于if (child.type.name === 'FlowSendButton')这是判断根本不...

1293
来自专栏Jerry的SAP技术分享

S/4HANA for Customer Management里的搜索分页处理

这篇文章的英文版我发在了SAP Community上:Paging Implementation in S/4HANA for Customer Managem...

3934
来自专栏码神联盟

IntelliJ系列 ⑥ | IDEA 之 常见的高效配置全解

2573

扫码关注云+社区

领取腾讯云代金券