一步一步使用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();

        }

    }

}

 
余下的就是创建视图了，下文再说。