资源描述：
《ExtJS5学习之Grid与Grid之间的数据拖拽.docx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、ExtJS5学习之Grid与Grid之间的数据拖拽拖拽是一个提升用户体验的一个特色功能，虽然不是必需的，但如果添加上此功能，必然就立马变得高大上了，有木有。Grid与Grid之间的数据拖拽是由gridviewdragdrop插件，官方源码已经内置了该插件，无须自己实现，进行些简单配置就完事儿了。下面是示例代码：Js代码Ext.require(['Ext.grid.*','Ext.data.*','Ext.dd.*']);Ext.define('DataObject',{extend:'Ext.data.Model',fields:['name','c
2、olumn1','column2']});Ext.onReady(function(){varmyData=[{name:"Rec0",column1:"0",column2:"0"},name:"Rec1",column1:"1",I，column2:"1"},name:"Rec2",column1:"2",厶，column2:"2"},name:"Rec3",column1:"3",column2:"3"},name:"Rec4",column1:"4",column2:"4"},name:"Rec5",column1:"5",column2:"
3、5"},name:"Rec6",column1:"6",column2:"6"},name:"Rec7",column1:"7",column2:"7"},name:"Rec8",column1:"8",column2:"8"},name:"Rec9",column1:"9",column2:"9"}];//createthedatastorevarfirstGridStore=Ext.create('Ext.data.Store',{model:'DataObject',data:myData});//ColumnModelshortcutarra
4、yvarcolumns=[{text:"RecordName",flex:1,sortable:true,dataIndex:'name'},{text:"column1",width:70,sortable:true,dataIndex:'column1'},{text:"column2",width:70,sortable:true,dataIndex:'column2'}];//declarethesourceGridvarfirstGrid=Ext.create('Ext.grid.Panel',{viewConfig:{plugins:{p
5、type:'gridviewdragdrop',dragGroup:'firstGridDDGroup',dropGroup:'secondGridDDGroup'},listeners:{drop:function(node,data,dropRec,dropPosition){vardropOn=dropRec?''+dropPosition+''+dropRec.get('name'):'onemptyview';Ext.example.msg("Dragfromrighttoleft",'Dropped'+data.records[0].ge
6、t('name')+dropOn);}}},store:firstGridStore,columns:columns,stripeRows:true,title'Grid-1',margins:'0200'});varsecondGridStore=Ext.create('Ext.data.Store',model:'DataObject'});varsecondGrid=Ext.create('Ext.grid.Panel',viewConfig:{plugins:ptype:'gridviewdragdrop',dragGroup:'second
7、GridDDGroup',dropGroup:'firstGridDDGroup'},listeners:{drop:function(node,data,dropRec,dropPosition){vardropOn=dropRec?''+dropPosition+''+dropRec.get('name'):'onemptyview';Ext.example.msg("Dragfromlefttoright",'Dropped'+data.records[0].get('name')+dropOn);},store:secondGridStore
8、,columns:columns,stripeRows:true,title'Grid-2',margins
