ExtJS5学习之Grid与Grid之间的数据拖拽

    拖拽是一个提升用户体验的一个特色功能，虽然不是必需的，但如果添加上此功能，必然就立马变得高大上了，有木有。Grid与Grid之间的数据拖拽是由gridviewdragdrop插件，官方源码已经内置了该插件，无须自己实现，进行一些简单配置就完事儿了。下面是示例代码：

    

Js代码  

1. Ext.require([  
2.     'Ext.grid.*',  
3.     'Ext.data.*',  
4.     'Ext.dd.*'  
5. ]);  
6.   
7. Ext.define('DataObject', {  
8.     extend: 'Ext.data.Model',  
9.     fields: ['name', 'column1', 'column2']  
10. });  
11.   
12. Ext.onReady(function(){  
13.   
14.     var myData = [  
15.         { name : "Rec 0", column1 : "0", column2 : "0" },  
16.         { name : "Rec 1", column1 : "1", column2 : "1" },  
17.         { name : "Rec 2", column1 : "2", column2 : "2" },  
18.         { name : "Rec 3", column1 : "3", column2 : "3" },  
19.         { name : "Rec 4", column1 : "4", column2 : "4" },  
20.         { name : "Rec 5", column1 : "5", column2 : "5" },  
21.         { name : "Rec 6", column1 : "6", column2 : "6" },  
22.         { name : "Rec 7", column1 : "7", column2 : "7" },  
23.         { name : "Rec 8", column1 : "8", column2 : "8" },  
24.         { name : "Rec 9", column1 : "9", column2 : "9" }  
25.     ];  
26.   
27.     // create the data store  
28.     var firstGridStore = Ext.create('Ext.data.Store', {  
29.         model: 'DataObject',  
30.         data: myData  
31.     });  
32.   
33.   
34.     // Column Model shortcut array  
35.     var columns = [  
36.         {text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'},  
37.         {text: "column1", width: 70, sortable: true, dataIndex: 'column1'},  
38.         {text: "column2", width: 70, sortable: true, dataIndex: 'column2'}  
39.     ];  
40.   
41.     // declare the source Grid  
42.     var firstGrid = Ext.create('Ext.grid.Panel', {  
43.         viewConfig: {  
44.             plugins: {  
45.                 ptype: 'gridviewdragdrop',  
46.                 dragGroup: 'firstGridDDGroup',  
47.                 dropGroup: 'secondGridDDGroup'  
48.             },  
49.             listeners: {  
50.                 drop: function(node, data, dropRec, dropPosition) {  
51.                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';  
52.                     Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);  
53.                 }  
54.             }  
55.         },  
56.         store            : firstGridStore,  
57.         columns          : columns,  
58.         stripeRows       : true,  
59.         title            : 'Grid-1',  
60.         margins          : '0 2 0 0'  
61.     });  
62.   
63.     var secondGridStore = Ext.create('Ext.data.Store', {  
64.         model: 'DataObject'  
65.     });  
66.   
67.     var secondGrid = Ext.create('Ext.grid.Panel', {  
68.         viewConfig: {  
69.             plugins: {  
70.                 ptype: 'gridviewdragdrop',  
71.                 dragGroup: 'secondGridDDGroup',  
72.                 dropGroup: 'firstGridDDGroup'  
73.             },  
74.             listeners: {  
75.                 drop: function(node, data, dropRec, dropPosition) {  
76.                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';  
77.                     Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);  
78.                 }  
79.             }  
80.         },  
81.         store            : secondGridStore,  
82.         columns          : columns,  
83.         stripeRows       : true,  
84.         title            : 'Grid-2',  
85.         margins          : '0 0 0 3'  
86.     });  
87.   
88.     var displayPanel = Ext.create('Ext.Panel', {  
89.         width        : 650,  
90.         height       : 300,  
91.         layout       : {  
92.             type: 'hbox',  
93.             align: 'stretch',  
94.             padding: 5  
95.         },  
96.         renderTo     : 'panel',  
97.         defaults     : { flex : 1 },  
98.         items        : [  
99.             firstGrid,  
100.             secondGrid  
101.         ],  
102.         dockedItems: {  
103.             xtype: 'toolbar',  
104.             dock: 'bottom',  
105.             items: ['->',  
106.                 {  
107.                     text: '重置两个Grid',  
108.                     handler: function(){  
109.                         firstGridStore.loadData(myData);  
110.                         secondGridStore.removeAll();  
111.                     }  
112.                 }]  
113.         }  
114.     });  
115. });  

示例截图：


 接下来打算研究下treePanel的节点拖拽。

代码请在附件里下载。如有疑问，请加裙咨询

转载：http://iamyida.iteye.com/blog/2190441