/** * 第一个表格拖放例子 */ 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("越界了"); } }); });