extjs3.1实现两个分组grid拖拽功能

[img]http://dl2.iteye.com/upload/attachment/0096/2178/c88dd04b-ea98-302b-8fe8-bc26c50c53ec.jpg[/img]

//实现grid拖拽
Ext.onReady(function(){
	var dragRec = Ext.data.Record.create([
	     {name: 'name'},        
	     {name: 'age'},        
	     {name: 'kind'}    
	  ]);
	var dragReader = new Ext.data.ArrayReader({
	     // id: 0                 // 提供数组的下标位置存放记录的ID（可选的）    // The subscript within row Array that provides an ID for the Record (optional)
	    }, dragRec);
	var dropRec = Ext.data.Record.create([
	     {name: 'name'},        
	     {name: 'age'},        
	     {name: 'kind'}       
	 ]);
	var dropReader = new Ext.data.ArrayReader({
	    // id: 0                 // 提供数组的下标位置存放记录的ID（可选的）    // The subscript within row Array that provides an ID for the Record (optional)
	   }, dropRec);

	var dragStore = new Ext.data.GroupingStore({
		reader:dragReader,
		sortInfo:{field: 'age', direction: "ASC"},//必须要有
		groupField:'kind',
		data:[['张三',20,'a'],['李四',30,'a'],['王柳',18,'b'],
		      ['王丹丹',30,'b'],['张鼎鼎',28,'c']
		      ]
	});
	var dropStore = new Ext.data.GroupingStore({
		reader:dropReader,
		sortInfo:{field: 'age', direction: "ASC"},//必须要有
	    groupField:'kind',
		data:[]
	});
	var dragGrid = new Ext.grid.GridPanel({
	    store: dragStore,
	    columns: [
	        { header: "姓名", width: 100, sortable: true, dataIndex: 'name'},
	        {header: "年龄", width: 80, sortable: true, dataIndex: 'age'},
	        {header: "类别", width: 80, sortable: true, dataIndex: 'kind'}
	    ],
	    margins : '3 3 3 3',
	    enableDragDrop :true,
	    ddGroup : 'dragGridDDGroup',
	    viewConfig: {
	       // forceFit: true
	    },
	    view: new Ext.grid.GroupingView({
	    	forceFit : true,
			startCollapsed:false,//分组是关闭的
			hideGroupedColumn:true,//隐藏分组列
			groupTextTpl : '{text} ({[values.rs.length]} 条记录)'
	    }),
	    sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
	   // width:400,
	    flex:1,
	    height:300,
	    frame:true,
	    title:'选择'
	});
	var dropGrid = new Ext.grid.GridPanel({
	    store: dropStore,
	    columns: [
	        { header: "姓名", width: 100, sortable: true, dataIndex: 'name'},
	        {header: "年龄", width: 80, sortable: true, dataIndex: 'age'},
	        {header: "类别", width: 80, sortable: true, dataIndex: 'kind'}
	    ],
	    margins : '3 3 3 3',
	    enableDragDrop :true,
	    ddGroup : 'dropGridDDGroup',
	    viewConfig: {
	       // forceFit: true
	    },
	    view: new Ext.grid.GroupingView({
	    	forceFit : true,
			startCollapsed:false,//分组是关闭的
			hideGroupedColumn:true,//隐藏分组列
			groupTextTpl : '{text} ({[values.rs.length]} 条记录)'
	    }),

	    sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
	    //width:400,
	    flex:1,
	    height:300,
	    frame:true,
	    title:'已选'
	});
	var panel = new Ext.Panel({
		layout:'hbox',
		border:false,
		width:1000,
		height:350,
		renderTo:Ext.getBody(),
		items:[dragGrid,dropGrid],
		buttons : [{
		    text:'复位',
		    handler:function(){
		    	alert('arrNewId:'+arrNewId+'</br>arrDelId:'+arrDelId)
		    }
	    }] 
	});

	 var dropGridDropTargetEl = dropGrid.getView().el.dom.childNodes[0].childNodes[1];
		var dropGridDropTarget = new Ext.dd.DropTarget(
				dropGridDropTargetEl, {
		        ddGroup : 'dragGridDDGroup',
		        copy : true,
		        notifyDrop : function(ddSource, e, data) {
			    function addRow(record, index, allItems) {
			    	dropGrid.getStore().addSorted(record);//addSorted排序添加
					ddSource.grid.store.remove(record);

			    }
			    // Loop through the selections
			    Ext.each(ddSource.dragData.selections, addRow);
			    dropGrid.getView().refresh();
			    ddSource.grid.getView().refresh();
			    return (true);
		    }
	    });

     var dragGridDropTargetEl = dragGrid.getView().el.dom.childNodes[0].childNodes[1];
     var dragGridDropTarget = new Ext.dd.DropTarget(
    		 dragGridDropTargetEl, {
		    	ddGroup : 'dropGridDDGroup',
		    	copy : false,
		    	notifyDrop : function(ddSource, e, data) {
			    function addRow(record, index, allItems) {
			    	    dragGrid.getStore().addSorted(record);
					    ddSource.grid.store.remove(record);

			    }
			    Ext.each(ddSource.dragData.selections, addRow);
			    dropGrid.getView().refresh();
			    ddSource.grid.getView().refresh();
			    return (true);
		    }
	    });
});