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 = "注册成功!";
			}
		});

评论

3 楼 TeddyWang 2010-10-11  

starlight_王亦 写道

TeddyWang 写道

原来是Extjs 居然把分类弄了了Eet……想了很久不知道是什么

不好意思,误人了,多亏你提醒.thank you .

看样是在尝试着用ext，多去ext官网上看看demo，什么例子都可以找到，比较方便。

2 楼 starlight_王亦 2010-10-02  

TeddyWang 写道

原来是Extjs 居然把分类弄了了Eet……想了很久不知道是什么

不好意思,误人了,多亏你提醒.thank you .

1 楼 TeddyWang 2010-09-30  

原来是Extjs 居然把分类弄了了Eet……想了很久不知道是什么