Extjs 中的GridPanel学习例子三(拖放)

/**
 * 第一个表格拖放例子
 */
Ext.onReady(function(){

	var cm = new Ext.grid.ColumnModel([
	  {header:'编号',dataIndex:'id'},
	  {header:'名称',dataIndex:'name'},
	  {header:'描述',dataIndex:'descn'}
	]);
	
	
	var data=[
	  ['1','name1','descn1'],
	  ['2','name1','descn2'],
	  ['3','name1','descn3'],
	  ['4','name1','descn4'],
	  ['5','name1','descn5']
	];
	
	var store = new Ext.data.Store({
	  proxy:new Ext.data.MemoryProxy(data),
	  reader:new Ext.data.ArrayReader({},[
	    {name:'id'},
	    {name:'name'},
	    {name:'descn'}
	  ])
	});
	
	store.load();
	
	var grid = new Ext.grid.GridPanel({
	  renderTo:'myid',
	  store:store,
	  cm:cm,
	  width:450,
	  height:130,
	  enableDragDrop:true,//单纯使用这个熟悉的话,只是起到拖动的功能,不能拖放
	  viewConfig:{ forceFit:true }
	});
	
	var rz = new Ext.Resizable(grid.getEl(),{
	  
		wrap:true,
		minHeight:100,//限制改变的最小高度
		pinned:true,//若为true,则拖动的区域则为一直在表格的下方.效果可以自己尝试
		handles:'s'//s就是south的意思
	});
	
	rz.on('resize',grid.syncSize(),grid);
	
	//拖放的功能
	var ddrow = new Ext.dd.DropTarget(grid.container,{
	   ddGroup:'GridDD',//分组名称,API是这样解释的:如果一个组被定义好了,那么组内的对象只与相同的组的对象进行交互
	                    //于是生出的表格,里面的数据,只能在Grid里进行拖放
	   copy:false,
	   notifyDrop:function(dd,e,data){
	   
	   	  var rows = data.selections;//选择的行
	   	  var index = dd.getDragData(e).rowIndex;
	   	  if(typeof(index)=="undefined"){
	   	     return;
	   	  }
	   	  
	   	  for(var i = 0;i<rows.length;i++){
	   	     var rowData = rows[i];
	   	     if(!this.copy){
	   	        store.remove(rowData);//拖得时候.假如放的动作完成,完成从数组删除
	   	      }
	   	      store.insert(index,rowData);
	   	  }
	   
	   },
	   	notifyOut:function(dd,e,data){//当然这个界限范围也是在GridD这个组内!
            alert("越界了");
	   	}
	   
	});
	
});