extjs4.0----Grid To Grid拖拽示例

图示：

 

 js：

[javascript]  view plain copy

1. <script type="text/javascript">  
2.       
3.     Ext.require([  
4.         'Ext.grid.*',  
5.         'Ext.data.*',  
6.         'Ext.dd.*'  
7.     ]);  
8.       
9.     Ext.define('DataObject', {  
10.         extend: 'Ext.data.Model',  
11.         fields: ['name', 'column1', 'column2']  
12.     });  
13.       
14.     Ext.onReady(function(){  
15.       
16.         var myData = [  
17.             { name : "娜姐", column1 : "25", column2 : "3" },  
18.             { name : "船长", column1 : "24", column2 : "2" },  
19.             { name : "傻妞", column1 : "23", column2 : "3" },  
20.             { name : "阿呆", column1 : "25", column2 : "3" },  
21.             { name : "猫猫", column1 : "24", column2 : "3" }  
22.         ];  
23.       
24.         // create the data store  
25.         var firstGridStore = Ext.create('Ext.data.Store', {  
26.             model: 'DataObject',  
27.             data: myData  
28.         });  
29.       
30.       
31.         // Column Model shortcut array  
32.         var columns = [  
33.             {text: "姓名", flex: 1, sortable: true, dataIndex: 'name'},  
34.             {text: "年龄", width: 70, sortable: true, dataIndex: 'column1'},  
35.             {text: "水龄", width: 70, sortable: true, dataIndex: 'column2'}  
36.         ];  
37.       
38.         // declare the source Grid  
39.         var firstGrid = Ext.create('Ext.grid.Panel', {  
40.             multiSelect: true,  
41.             viewConfig: {  
42.                 plugins: {  
43.                     ptype: 'gridviewdragdrop',  
44.                     dragGroup: 'firstGridDDGroup',  
45.                     dropGroup: 'secondGridDDGroup'  
46.                 },  
47.                 listeners: {  
48.                     drop: function(node, data, dropRec, dropPosition) {  
49.                         var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';  
50.                         //Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);  
51.                     }  
52.                 }  
53.             },  
54.             store            : firstGridStore,  
55.             columns          : columns,  
56.             stripeRows       : true,  
57.             title            : '待选',  
58.             margins          : '0 2 0 0'  
59.         });  
60.       
61.         var secondGridStore = Ext.create('Ext.data.Store', {  
62.             model: 'DataObject'  
63.         });  
64.       
65.         // create the destination Grid  
66.         var secondGrid = Ext.create('Ext.grid.Panel', {  
67.             viewConfig: {  
68.                 plugins: {  
69.                     ptype: 'gridviewdragdrop',  
70.                     dragGroup: 'secondGridDDGroup',  
71.                     dropGroup: 'firstGridDDGroup'  
72.                 },  
73.                 listeners: {  
74.                     drop: function(node, data, dropRec, dropPosition) {  
75.                         var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';  
76.                         //Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);  
77.                     }  
78.                 }  
79.             },  
80.             store            : secondGridStore,  
81.             columns          : columns,  
82.             stripeRows       : true,  
83.             title            : '已选',  
84.             margins          : '0 0 0 3'  
85.         });  
86.       
87.         //Simple 'border layout' panel to house both grids  
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: Ext.getBody(),  
97.             defaults     : { flex : 1 }, //auto stretch  
98.             items        : [  
99.                 firstGrid,  
100.                 secondGrid  
101.             ],  
102.             dockedItems: {  
103.                 xtype: 'toolbar',  
104.                 dock: 'bottom',  
105.                 items: ['->', // Fill  
106.                 {  
107.                     text: '全选',  
108.                     handler: function(){  
109.                         firstGridStore.removeAll();  
110.                         secondGridStore.loadData(myData);  
111.       
112.                     }  
113.                 },{  
114.                     text: '取消',  
115.                     handler: function(){  
116.                         firstGridStore.loadData(myData);  
117.                         secondGridStore.removeAll();  
118.                     }  
119.                 }]  
120.             }  
121.         });  
122.     });  
123.   
124.     </script>