昨天还有一个错误，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];
代码中，RowEditing设置了autoCancel为false，表示用户必须单击取消按钮才能退出编辑状态，这样可避免一些难以预料的状态发生。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;
}
这里用到了2个图片文件，将它们复制到scripts\app\resources\images目录下。
复制后，切换回用户视图脚本文件，在分页工具栏定义中加入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选择行后才会启用。
现在，可以测试一下效果了，在浏览器打开页面，登录后切换到用户管理，双击第二条记录，将看到如图27所示的效果，界面显示正常。
图27 添加RowEditing后的用户视图
现在，要在控制器完成各种视图操作了。切换到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();
}
图28 添加操作提交数据的格式
现在要在服务器端完成用户的添加功能了，这里要注意的是数据的提交方式。如果不清楚，可在页面单击添加按钮，然后单击保存按钮，在Firebug中就可以看到如图28所示的提交数据。 在服务器端的处理过程就是通过data提取数据，然后转换为JSON数组，从数组中把数据提取出来。对于添加操作，调用Membership的CreateUser方法添加用户就可以了，具体代码如下：
publicJObject 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];
MembershipCreateStatuscreateStatus;
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;
}
returnMyFunction.WriteJObjectResult(success, 0, msg, ja);
}
这里要注意的事项是，如果创建成功，必须返回最终数据以更改客户端的信息，主要是更新用户id，因而数据的返回格式与列表返回的格式相同。还要在MyFunction中实现ErrorCodeToString方法，用来将错误代码转换为信息返回，在这里就不列了，有兴趣自己下载代码看。
编辑用户的操作过程与添加操作雷同，不过Membership不允许修改用户名，因为最好在编辑的时候，不允许用户修改用户名。这个需要在RowEditing进入编辑之前来控制编辑控件的状态，也就是在beforeedit事件中实现。先在Grid绑定beforeedit事件，代码如下：
me.getUserView().on("beforeedit",me.onBeforeEdit, me);
在onBeforeEdit方法内，要对用户名的编辑组件进行操作，因而要为它添加一个引用，那就要先为编辑控件添加一个id，在用户视图脚本文件内，为用户名的编辑控件添加一个id：
id:"editorUserName"
然后在控制器加入引用：
{ ref: "editorUserName",selector: "#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);
}
获取数据的方式与返回数据的方式是一样的。最简单的角色操作是先把用户原有的角色全部删除，然后再添加新的角色。这里则使用了另一种方法，遍历所有的角色，然后判断新设置的角色是否包含该角色，如果包含，而旧有角色又不包含，则调用AddUserToRole方法添加角色。如果不包含，则判断旧有角色是否包含，如果包含，就调用RemoveUserFromRole方法删除角色。
好了，今天到这里，明天继续。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
