ExtJs十(ExtJs Mvc用户管理之二)

2021-07-16 13:08:57

原文 http://www.cnblogs.com/aehyok/archive/2013/04/26/3044152.html

前言

为了防止意外情况，这里添加了try模块，在错误的时候会将错误信息作为Msg关键字的值返回。

而在客户端脚本，目前是没有处理错误信息的代码的，因而在这里返回的错误信息，客户端是看不到。如果要处理这样的错误信息，就要在Store的Proxy中监听exception事件。因为exception事件的回调函数是一致的，因而可以统一到一个函数中处理，就不用复制再复制了。

先切换到Index.cshtml，在Ext.ns下添加以下代码定义处理exception事件的回调：

            ExtMVCOne.ProxyException = function (proxy, response, opts) {
                Ext.Msg.alert("错误信息", opts.error);
            }

在 exception事件的回调函数的第三个参数返回的是Operation对象，当success为false时，它会将Msg关键字的值复制到对象的 error属性，因而直接调用该属性就可获得错误信息了。在这里要处理的意外情况其实还有很多，大家可根据API的说明完善该函数。

接着，切换到Users的Store，在proxy定义内添加listeners配置项来监听exception事件，代码如下：

        listeners: {
            exception: ExtMVCOne.ProxyException
        }

要测试exception事件是否能正常执行，在pagesize的定义代码前添加以下代码抛出一个异常：

throw new Exception("发生错误了。");

F5运行后到用户管理标签

上一节中还有一个错误就是，CheckColumn的样式和图片没复制过来，造成最后一列的Checkbox显示不正确。在Ext JS包的examples\ux\css目录下打开CheckHeader.css文件，将文件里的全部样式定义复制到app.css中。然后修改将带背景图片的路径修改为“../images”。最后将image目录下的check.gif和uncheck.gif文件复制到scripts\app \resources\images目录下。

用户管理添加修改删除重置密码

首先切换到用户视图脚本文件，为Grid添加一个RowEditing插件，这不难，创建RowEditing的实例，并添加到plugins就行了，代码如下：

        me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            autoCancel: false,
            saveBtnText: '保存',
            cancelBtnText: '取消',
            errorsText: '错误',
            dirtyText: "你要确认或取消更改"
        });

        me.plugins = [me.rowEditing];

现在，要为用户名、电子邮件、角色和禁用列添加编辑控件了，这个只要定义好editor配置项就可以了，修改后的代码如下：

        me.columns = [
            { text: '用户名', dataIndex: 'Username', flex: 1,
                editor: { allowBlank: false }
            },
            { text: '电子邮件', dataIndex: 'Email', flex: 1 ,
                editor: { allowBlank: false, vtype: 'email' }
            },
            { text: '角色', dataIndex: 'Roles', flex: 1 ,
                editor: {
                    xtype: 'combo', store: 'Roles', multiSelect: true, allowBlank: false, editable: false,
                    emptyText: "请选择角色", forceSelection: true
                }
            },
            { 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 ,
                editor: { xtype: 'checkbox', cls: 'x-grid-checkheader-editor' }
            }
        ]

代码中，用户名只是简单的不允许为空；电子邮件除了不允许为空外，还要符合电子邮件格式（vtype为email）；角色则使用Combobox，数据来自之前定义的Roles Store；禁用列则使用了Checkbox控件，样式使用x-grid-checkheader-editor，这样好看点。

接着在分页工具栏添加3个按钮，其中添加用户、删除用户使用图标显示，而重置密码则直接使用文字按钮。要在按钮显示图标，最好的方式使用样式，因而，先切换到app.css，添加以下样式：

.user-add{
     background:url("../images/user-add-16.png")!important;
}
.user-delete{
     background:url("../images/user-delete-16.png")!important;
}

复制后，切换回用户视图脚本文件，在分页工具栏定义中加入items配置项来添加按钮，代码如下：

            items: [
                '-',
                { iconCls: "user-add", tooltip: '添加用户', id: "buttonUserAdd" },
                { iconCls: "user-delete", tooltip: '删除用户', id: "buttonUserDelete", disabled: true },
                '-',
               { text: "重置密码", id: "buttonUserResetPassword", disabled: true }
            ]

注意，按钮全部都添加了id，目的就是在控制器中使用id查找按钮。删除用户和重置密码默认状态为disabled状态，只有在Grid选择行后才会启用。

然后可以F5运行，然后点击Grid数据行，效果如下

现在，要在控制器完成各种视图操作了。切换到Users控制器，先添加一些引用来获取视图和按钮，代码如下：

    refs: [
        { ref: "UserPanel", selector: "#userPanel" },
        { ref: "UserView", selector: "#usersView" },
        { ref: "ButtonUserAdd", selector: "#buttonUserAdd" },
        { ref: "ButtonUserDelete", selector: "#buttonUserDelete" },
        { ref: "ButtonUserResetPassword", selector: "#buttonUserResetPassword" },
    ],

这样，就可通过get方法获得各控件了。

首先来完成选择一条记录后，启用删除和重置密码按钮。实现相当简单，利用引用，使用getUserView返回用户视图后，调用on方法绑定 selectionchange事件就行了。当然也可以在control方法内定义，不过笔者感觉再用id获取一次对象，有点多余。在panel.add 这句下加入以下代码：

me.getUserView().on("selectionchange", me.onUserSelect, me);

在onUserSelect方法内，利用get方法返回两个按钮后，调用对象的setDisabled方法设置其开启状态就可以了，代码如下：

    onUserSelect:function(model, rs){
        var me=this,
        length=rs.length;
       me.getButtonUserDelete().setDisabled(length==0);
       me.getButtonUserResetPassword().setDisabled(length == 0);
    },

事件selectionchange会在第二个参数以数组形式返回所有选择的记录，只要数组的长度不为0，就启用按钮的，为0则禁用按钮。

接着完成添加操作，在绑定selectionchange事件的代码下添加以下代码绑定click事件：

me.getButtonUserAdd().on("click", me.onAddUser, me);

在onAddUser方法内，要做的操作是先调用cancelEdit取消当前编辑操作，以避免在编辑过程中单击了添加按钮出现问题。接着在Store中添加一条记录。最后调用startEdit方法进入编辑状态。具体代码如下：

   onAddUser: function () {
       var me = this
       edit = me.getUserView().plugins[0],
       User = me.getUserModel();
       edit.cancelEdit();
       me.getUsersStore().insert(0, new User);
       edit.startEdit(0, 0);
   },

代码中，getUserModel是定义models配置项时自动生成的方法，可返回模型。同理，getUsersStore方法也是自动生成的，用于返回Store。要注意plugins中的索引，因为当前示例只有一个插件，因而使用0就可以返回RowEditing实例了，如果有多个插件，要注意索引值。

接下来要考虑怎么保存数据了，在RowEditing有一个Edit事件，它会在编辑完成后触发，非常适合用来进行数据保存操作。而且该事件会把事件冒泡到Grid，因而在Grid绑定该事件就行了，代码如下：

me.getUserView().on("edit",me.onEditcomplete, me);

在onEditcomplete方法内，调用Store的sync方法将数据同步到服务器就行了，代码如下：

   onEditcomplete: function (editor, e) {
       var me = this;
       me.getUsersStore().sync({
           success: function (e, opt) {
               var me = this;
               me.getUsersStore().commitChanges();
           },
           failure: function (e, opt) {
               var me = this, msg = "";
               me.getUsersStore().rejectChanges()
               Ext.Msg.alert("错误", e.exceptions[0].error);
           },
           scope: me
       });
   }

如果同步操作，服务器返回success为true，则调用commitChanges方法确认修改，如果失败，则调用rejectChanges方法取消修改，并显示错误信息。错误信息的处理与上文的处理差不多，只是返回的对象不同，自己根据需要做好定义就行了。

还有考虑用户取消编辑时，要调用rejectChanges方法取消更改，这个通过监听canceledit事件就可以实现，代码如下：

me.getUserView().on("canceledit", me.onCancelEdit, me);

方法onCancelEdit的代码如下：

   onCancelEdit: function () {
       var me = this;
       me.getUsersStore().rejectChanges();
   }

现在要在服务器端完成用户的添加功能了，这里要注意的是数据的提交方式。如果不清楚，可在页面单击添加按钮，然后单击保存按钮，在Firebug中就可以看到如图28所示的提交数据。在服务器端的处理过程就是通过data提取数据，然后转换为JSON数组，从数组中把数据提取出来。对于添加操作，调用Membership的 CreateUser方法添加用户就可以了，具体代码如下：

public JObject Add()
        {
            bool success = false;
            string msg = "";
            JArray ja = null;
            try
            {
                string data = Request["data"] ?? "";
                if (string.IsNullOrEmpty(data))
                {
                    msg = "错误的提交数据。";
                }
                else
                {
                    ja = JArray.Parse(data);
                    if (ja.Count > 0)
                    {
                        JObject jo = (JObject)ja[0];
                        MembershipCreateStatus createStatus;
                        MembershipUser user = Membership.CreateUser((string)jo["Username"], "123456", (string)jo["Email"], null, null, (bool)jo["IsApproved"], out createStatus);
                        if (createStatus == MembershipCreateStatus.Success)
                        {
                            success = true;
                            string[] roles = ((JArray)jo["Roles"]).Values<string>().ToArray<string>();
                            jo["id"] = user.ProviderUserKey.ToString();
                            jo["Created"] = user.CreationDate.ToString("yyyy-MM-dd hh:mm:ss");
                            jo["LastLoginDate"] = user.LastLoginDate.ToString("yyyy-MM-dd hh:mm:ss");
                            Roles.AddUserToRoles(user.UserName, roles);
                        }
                        else
                        {
                            msg = MyFunction.ErrorCodeToString(createStatus);
                        }
                    }
                    else
                    {
                        msg = "错误的提交数据。";
                    }
                }
            }
            catch (Exception e)
            {
                msg = e.Message;
            }
            return MyFunction.WriteJObjectResult(success, 0, msg, ja);
        }

还要在相应的MyFunction类中添加方法

        public static string ErrorCodeToString(MembershipCreateStatus createStatus)
        {
            // See http://go.microsoft.com/fwlink/?LinkID=177550 for
            // a full list of status codes.
            switch (createStatus)
            {
                case MembershipCreateStatus.DuplicateUserName:
                    return "当前用户名已被注册，请使用其他用户名。";

                case MembershipCreateStatus.DuplicateEmail:
                    return "当前电子邮件已被注册，请使用其他电子邮件。";

                case MembershipCreateStatus.InvalidPassword:
                    return "密码错误，请输入正确的密码。";

                case MembershipCreateStatus.InvalidEmail:
                    return "电子邮件地址错误，请重新输入。";

                case MembershipCreateStatus.InvalidAnswer:
                    return "The password retrieval answer provided is invalid. Please check the value and try again.";

                case MembershipCreateStatus.InvalidQuestion:
                    return "The password retrieval question provided is invalid. Please check the value and try again.";

                case MembershipCreateStatus.InvalidUserName:
                    return "用户名错误，请输入正确的用户名。";

                case MembershipCreateStatus.ProviderError:
                    return "系统错误，请联系管理员。";

                case MembershipCreateStatus.UserRejected:
                    return "当前请求已被取消，请重新输入并再次尝试提交。如果还存在问题，请与管理员联系。";

                default:
                    return "未知错误，请重新输入并再次尝试提交。如果问题依然存在，请与管理员联系。";
            }
        }

编辑用户的操作过程与添加操作雷同，不过Membership不允许修改用户名，因为最好在编辑的时候，不允许用户修改用户名。这个需要在 RowEditing进入编辑之前来控制编辑控件的状态，也就是在beforeedit事件中实现。先在Grid绑定beforeedit事件，代码如下：

me.getUserView().on("beforeedit", me.onBeforeEdit, me);

在onBeforeEdit方法内，要对用户名的编辑组件进行操作，因而要为它添加一个引用，那就要先为编辑控件添加一个id，在用户视图脚本文件内，为用户名的编辑控件添加一个id：

            { text: '用户名', dataIndex: 'Username', flex: 1,
                editor: { allowBlank: false, id: "editorUserName" }
            },

然后在控制器中引用：

现在完成onBeforeEdit方法，代码如下：

   onBeforeEdit: function (editor, e) {
       var me = this;
       if (e.record.data.id) {
           me.getEditorUsername().setDisabled(true);
       } 
       else {
           me.getEditorUsername().setDisabled(false);
       }
   }

编辑的数据都有id，而新增的数据id为null，因而通过判断id就可判断是编辑数据还是新增数据，从而可控制用户名是否允许编辑了。这也是为什么在添加数据后必须返回正确的id的一个重要原因。

现在可完成服务器端的编辑操作代码了，具体代码如下：

public JObject Edit()
        {
            bool success = false;
            string msg = "";
            JArray ja = null;
            try
            {
                string data = Request["data"] ?? "";
                if (string.IsNullOrEmpty(data))
                {
                    msg = "错误的提交数据。";
                }
                else
                {
                    ja = JArray.Parse(data);
                    if (ja.Count > 0)
                    {
                        JObject jo = (JObject)ja[0];
                        Guid id = Guid.Parse((string)jo["id"]);
                        MembershipUser user = Membership.GetUser(id);
                        if (user != null)
                        {
                            user.Email = (string)jo["Email"];
                            user.IsApproved = (bool)jo["IsApproved"];
                            Membership.UpdateUser(user);
                            string[] roles = ((JArray)jo["Roles"]).Values<string>().ToArray<string>();
                            string[] oldroles = Roles.GetRolesForUser(user.UserName);
                            string[] rolelist = new string[] { "普通用户", "系统管理员" };
                            foreach (var c in rolelist)
                            {
                                if (roles.Contains(c))
                                {
                                    if (!oldroles.Contains(c))
                                    {
                                        Roles.AddUserToRole(user.UserName, c);
                                    }
                                }
                                else
                                {
                                    if (oldroles.Contains(c))
                                    {
                                        Roles.RemoveUserFromRole(user.UserName, c);
                                    }
                                }
                            }
                            success = true;
                        }
                        else
                        {
                            msg = "要修改的用户不存在或已被删除。";
                        }
                    }
                    else
                    {
                        msg = "错误的提交数据。";
                    }
                }
            }
            catch (Exception e)
            {
                msg = e.Message;
            }
            return MyFunction.WriteJObjectResult(success, 0, msg, ja);
        }

现在来完成删除功能。目前的Grid，一次只能选择一行，也就是说，一次只能删除一行，不太方便，因而要设置成使用复选框选择，并允许多选的。在用户视图脚本文件中，添加以下配置项实现这个：

    selType: "checkboxmodel",
    selModel: { checkOnly: false, mode: "MULTI" },

打开浏览器刷新

删除用户的方式有2种，一种是先使用remove方法在Store中删除记录，然后调用sync方法同步，一种是提取选择行的id，然后通过 Ajax方式提交到服务器进行删除，确认后再在客户端刷新页面。第一种方式必须在proxy的api定义中定义destroy配置项，之前的代码中已经定义了，因而本示例将使用该方式。第二种方式如果也定义了destroy配置项，就千万别用remove删除Store的记录，不然在添加或编辑的时候，调用sync方法进行同步的时候会把删除记录的数据一起提交的。

现在切换到Users控制器的脚本，为删除按钮绑定单击事件，代码如下：

me.getButtonUserDelete().on("click", me.onDeleteUser, me);

在onDeleteUser方法内，要先从Store的选择模型获取选择的记录。如果有选择记录，则先提示用户是否真的删除用户。确认后，调用 remove方法删除记录，并调用sync方法同步数据，如果成功，调用commitChanges方法确认修改，否则调用rejectChanges方法取消修改。具体代码如下：

   onDeleteUser: function () {
       var me = this,
       sm = me.getUserView().getSelectionModel();
       if (sm.getCount() > 0) {
           var rs = sm.getSelection();
           content = ["确定删除以下用户？"];
           for (var i = 0; ln = rs.length, i < ln; i++) {
               content.push(rs[i].data.Username);
           }
           Ext.Msg.confirm("删除用户", content.join("<br/>"), function (btn) {
               if (btn == "yes") {
                   varme = this,
                   rs = me.getUserView().getSelectionModel().getSelection()
                   store = me.getUsersStore();
                   store.remove(rs);
                   store.sync({
                       success: function (e, opt) {
                           var me = this;
                           me.getUsersStore().commitChanges();
                       },
                       failure: function (e, opt) {
                           var me = this;
                           me.getUsersStore().rejectChanges()
                           Ext.Msg.alert("发生错误", e.exceptions[0].error);
                       },
                       scope: me
                   });
               }
           }, me)
       } 
       else {
           Ext.Msg.alert('删除用户', '请选择要删除的用户。');
       }
   }

代码中，使用了数组content来组合确认信息。当用户确认后，就调用remove方法，并调用sync方法。

现在来完成服务器端代码。因为sync方法提交数据的方式是固定的，因而提取删除数据的方式与添加和编辑操作的一样，需要从data中提取数据，然后使用parse方法转换为JArray。余下的工作就是从JArray中提取出删除数据的JObject，通过id或Username去删除用户了，具体代码如下：

        public JObject Delete()
        {
            string msg = "";
            bool success = false;
            JArray ja = null;
            string data = Request["data"] ?? "";
            if (string.IsNullOrEmpty(data))
            {
                msg = "错误的提交数据。";
            }
            try
            {
                ja = JArray.Parse(data);
                if (ja.Count > 0)
                {
                    foreach (JObject jo in ja)
                    {
                        Membership.DeleteUser((string)jo["Username"]);
                    }
                    success = true;
                }
                else
                {
                    msg = "错误的提交数据。";
                }
            }
            catch (Exception e)
            {
                msg = e.Message;
            }
            return MyFunction.WriteJObjectResult(success, 0, msg, ja);
        }

这里要注意的是，和添加编辑操作一样，尽管success返回true，还是要把删除的数据返回。因为删除不需要改变原有的数据，因而直接将ja返回就行了。

还有2个问题要自己考虑清楚。第1个是删除后是否提示用户已删除记录，如果需要，在sync方法内的回调函数success内加入提示信息就可以了。第2个问题是，因为删除数据后，Grid内的数据会减少，是否需要刷新页面？

最后一个功能重置密码与删除用户差不多，也是从选择模型获取选择记录。不过，这次，不能用sync同步，只能通过提取id，然后使用Ajax方法提交数据了。先为重置密码按钮绑定单击事件，代码如下：

me.getButtonUserResetPassword().on("click", me.onResetPassword, me);

接着完成onResetPassword方法，代码如下：

   onResetPassword: function () {
       var me = this,
           rs = me.getUserView().getSelectionModel().getSelection();
       if (rs.length > 0) {
           var idList = [];
           for (var i = rs.length - 1; i >= 0; i--) {
               idList.push(rs[i].data.id);
           }
           Ext.Ajax.request({
               params: { id: idList },
               url: '/Users/ResetPassword',
               scripts: true,
               scope: me,
               success: function (response, opt) {
                   var obj = Ext.JSON.decode(response.responseText);
                   if (obj) {
                       if (obj.success) {
                           Ext.Msg.alert("提示信息", "重置密码成功");
                           return;
                       } else {
                           Ext.Msg.alert("错误", obj.Msg);
                       }
                   }
               },
               failure: function (response, options) {
                   Ext.Msg.alert("错误", "重置密码失败！<br>错误信息：" + response.responseText);
               }
           });
       }
   }

代码中，没有进行确认，如果需要，可自行添加。因为Ajax提交不是根据返回的success值来调用success方法或failure方法的，只要不是页面错误，都会执行回调函数success方法，因而要自己根据返回的数据，调用decode方法将数据转换为对象，然后根据success的值来做处理。

下面，完成服务器端的ResetPassword方法。在这里，有个麻烦，就是ChangePassword方法需要使用旧密码才能修改新买，而 ResetPassword方法会随机生成一个密码，都不能直接将密码设置为123456，因而，需要先用ResetPassword方法重置密码后，然后利用这个重置的密码，调用ChangePassword方法将密码修改为123456，具体代码如下：

        public JObject ResetPassword()
        {
            bool success = false;
            string msg = "";
            string idList = Request["id"] ?? "";
            try
            {
                string[] ids = idList.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                foreach (var c in ids)
                {
                    Guid id = Guid.Parse(c);
                    MembershipUser user = Membership.GetUser(id);
                    if (user != null)
                    {
                        string pwd = user.ResetPassword();
                        user.ChangePassword(pwd, "123456");
                    }
                }
                success = true;
            }
            catch (Exception e)
            {
                msg = e.Message;
            }
            return MyFunction.WriteJObjectResult(success, 0, msg, null);
        }

现在用户管理的基本功能（添加、删除、修改、重置密码）功能都实现了。

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

码农公寓

相关文章