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("越界了"); } });});?