GridPanel间列的拖拽
实在是太想睡觉了,就懒得整理了,
把项目中用做的源代码直接拷过来了.
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var submitUrl = 'addUser.action';
var message = '';
var firstGridStore = new Ext.data.Store({
url : "getAllRoleUser.action",
reader : new Ext.data.JsonReader({
root : "rows"
}, Ext.data.Record.create([{
name : "id"
}, {
name : "name"
}, {
name : "descs"
}]))
});
firstGridStore.load();
var cols = [{
id : 'name',
header : "id",
sortable : true,
dataIndex : 'id',
hidden : true
}, {
header : "角色名称",
width : 95,
sortable : true,
dataIndex : 'name'
}, {
header : "角色描述",
width : 95,
sortable : true,
dataIndex : 'descs'
}];
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : '可选角色'
});
var fields = [{
name : 'id',
mapping : 'id'
}, {
name : 'name',
mapping : 'name'
}, {
name : 'descs',
mapping : 'descs'
}];
var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : 'records'
});
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : '已选角色'
});
var idField = new Ext.form.TextField({
hidden : true,
name : 'user.id',
value : 0
});
var name = new Ext.form.TextField({
fieldLabel : '用户名',
id : 'name',
name : 'user.name',
regex : /\w/,
regexText : "只能输入英文和数字",
allowBlank : false
});
var nickname = new Ext.form.TextField({
fieldLabel : '昵称',
name : 'user.nickname',
allowBlank : false
});
var password = new Ext.form.TextField({
fieldLabel : '密 码',
name : 'newPassword',
minLength : 6,
minLengthText : '密码长度最少6位！',
maxLength : 20,
maxLengthText : '密码长度最多20位！',
inputType : 'password',
id : 'p_NewPassword',
allowBlank : false
});
var newPassword = new Ext.form.TextField({
xtype : 'textfield',
fieldLabel : '确认密码',
name : 'user.password',
minLength : 6,
minLengthText : '密码长度最少6位！',
maxLength : 20,
maxLengthText : '密码长度最多20位！',
id : 'p_ConfirmPassword',
inputType : 'password',
allowBlank : false
});
var state = new Ext.form.Checkbox({
fieldLabel : '状态',
width : 160,
boxLabel : '锁定',
name : 'user.state',
checked : false
});
var userInfo = new Ext.form.FormPanel({
bodyStyle : 'padding:5px 5px 0',
frame : true,
region : 'north',
width : 300,
height : 160,
items : [{
layout : 'column',
items : [{
columnWidth : .8,
layout : 'form',
labelAlign : 'right',
items : [name, nickname, password, newPassword,
state, idField]
}]
}]
});
var displayPanel = new Ext.Panel({
layout : 'hbox',
region : 'center',
autoScroll : true,
defaults : {
flex : 1
},
layoutConfig : {
align : 'stretch'
},
items : [firstGrid, secondGrid],
bbar : ['->', new Ext.Button({
text : '确定',
handler : function() {
var form = userInfo.getForm();
if (!form.isValid()) {
Ext.Msg.show({
title : '提示',
msg : '对不起,你还有未填写的信息!',
buttons : Ext.Msg.OK,
width : 300,
icon : Ext.Msg.WARNING
});
return;
}
var pwd = password.getValue();
var newPwd = newPassword.getValue();
if (newPwd != pwd) {
Ext.Msg.show({
title : '提示',
msg : '你输入的密码不一致!',
buttons : Ext.Msg.OK,
width : 300,
icon : Ext.Msg.WARNING
});
return;
}
var store = secondGrid.getStore();
var records = store.getRange(0, store
.getCount());
var dataArray = [];
for (var i = 0; i < records.length; i++) {
dataArray
.push(records[i].get("id"));
}
form.submit({
method : 'post',
url : submitUrl,
params : {
roleIdList : dataArray
},
success : function() {
window.parent.alert(
message,
Ext.Msg.INFO);
window.parent.close();
},
failure : function() {
window.parent.alert(
"对不起，用户名已存在!",
Ext.Msg.ERROR);
}
});
}
}), "-", {
text : '重置',
handler : function() {
firstGridStore.reload();
secondGridStore.removeAll();
userInfo.getForm().reset();
}
}]
});
var panel = new Ext.Panel({
renderTo : 'panel',
width : 400,
height : 400,
layout : 'border',
items : [displayPanel, userInfo]
});
var blankRecord = Ext.data.Record.create(fields);
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(
firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
notifyDrop : function(ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove,
ddSource.grid.store);
firstGrid.store.add(records);
firstGrid.store.sort('name', 'ASC');
return true
}
});
var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(
secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
notifyDrop : function(ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove,
ddSource.grid.store);
secondGrid.store.add(records);
secondGrid.store.sort('name', 'ASC');
return true
}
});
var roles = '';
var id = window.parent.id;
if (id != '') {
Ext.Ajax.request({
url : 'populateUser.action',
params : {
id : id
},
callback : function(options, success, response) {
var user = eval("(" + response.responseText
+ ")");
idField.setValue(user.id);
name.setValue(user.name);
nickname.setValue(user.nickname);
password.setValue(user.password);
newPassword.setValue(user.password);
user.state == 'true'
? state.setValue("on")
: state.setValue("false");
roles = user.roleList;
for (var i = 0; i < roles.length; i++) {
var records = firstGridStore.getRange(0,
firstGridStore.getCount());
for (var j = 0; j < records.length; j++) {
if (records[j].get("name") == roles[i]) {
firstGridStore.remove(records[j]);
secondGridStore.add(records[j]);
}
}
}
}
});
name.setDisabled(true);
submitUrl = 'updateUser.action';
message = '修改成功!';
} else {
name.setDisabled(false);
submitUrl = 'addUser.action';
message = "注册成功!";
}
});