1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | Ext.onReady(function(){ |
---|
8 | |
---|
9 | var myData = { |
---|
10 | records : [ |
---|
11 | { name : "Rec 0", column1 : "0", column2 : "0" }, |
---|
12 | { name : "Rec 1", column1 : "1", column2 : "1" }, |
---|
13 | { name : "Rec 2", column1 : "2", column2 : "2" }, |
---|
14 | { name : "Rec 3", column1 : "3", column2 : "3" }, |
---|
15 | { name : "Rec 4", column1 : "4", column2 : "4" }, |
---|
16 | { name : "Rec 5", column1 : "5", column2 : "5" }, |
---|
17 | { name : "Rec 6", column1 : "6", column2 : "6" }, |
---|
18 | { name : "Rec 7", column1 : "7", column2 : "7" }, |
---|
19 | { name : "Rec 8", column1 : "8", column2 : "8" }, |
---|
20 | { name : "Rec 9", column1 : "9", column2 : "9" } |
---|
21 | ] |
---|
22 | }; |
---|
23 | |
---|
24 | |
---|
25 | // Generic fields array to use in both store defs. |
---|
26 | var fields = [ |
---|
27 | {name: 'name', mapping : 'name'}, |
---|
28 | {name: 'column1', mapping : 'column1'}, |
---|
29 | {name: 'column2', mapping : 'column2'} |
---|
30 | ]; |
---|
31 | |
---|
32 | // create the data store |
---|
33 | var firstGridStore = new Ext.data.JsonStore({ |
---|
34 | fields : fields, |
---|
35 | data : myData, |
---|
36 | root : 'records' |
---|
37 | }); |
---|
38 | |
---|
39 | |
---|
40 | // Column Model shortcut array |
---|
41 | var cols = [ |
---|
42 | { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'}, |
---|
43 | {header: "column1", width: 50, sortable: true, dataIndex: 'column1'}, |
---|
44 | {header: "column2", width: 50, sortable: true, dataIndex: 'column2'} |
---|
45 | ]; |
---|
46 | |
---|
47 | // declare the source Grid |
---|
48 | var firstGrid = new Ext.grid.GridPanel({ |
---|
49 | ddGroup : 'secondGridDDGroup', |
---|
50 | store : firstGridStore, |
---|
51 | columns : cols, |
---|
52 | enableDragDrop : true, |
---|
53 | stripeRows : true, |
---|
54 | autoExpandColumn : 'name', |
---|
55 | width : 325, |
---|
56 | region : 'west', |
---|
57 | title : 'First Grid' |
---|
58 | }); |
---|
59 | |
---|
60 | var secondGridStore = new Ext.data.JsonStore({ |
---|
61 | fields : fields, |
---|
62 | root : 'records' |
---|
63 | }); |
---|
64 | |
---|
65 | // create the destination Grid |
---|
66 | var secondGrid = new Ext.grid.GridPanel({ |
---|
67 | ddGroup : 'firstGridDDGroup', |
---|
68 | store : secondGridStore, |
---|
69 | columns : cols, |
---|
70 | enableDragDrop : true, |
---|
71 | stripeRows : true, |
---|
72 | autoExpandColumn : 'name', |
---|
73 | width : 325, |
---|
74 | region : 'center', |
---|
75 | title : 'Second Grid' |
---|
76 | }); |
---|
77 | |
---|
78 | |
---|
79 | //Simple 'border layout' panel to house both grids |
---|
80 | var displayPanel = new Ext.Panel({ |
---|
81 | width : 650, |
---|
82 | height : 300, |
---|
83 | layout : 'border', |
---|
84 | renderTo : 'panel', |
---|
85 | items : [ |
---|
86 | firstGrid, |
---|
87 | secondGrid |
---|
88 | ], |
---|
89 | bbar : [ |
---|
90 | '->', // Fill |
---|
91 | { |
---|
92 | text : 'Reset both grids', |
---|
93 | handler : function() { |
---|
94 | //refresh source grid |
---|
95 | firstGridStore.loadData(myData); |
---|
96 | |
---|
97 | //purge destination grid |
---|
98 | secondGridStore.removeAll(); |
---|
99 | } |
---|
100 | } |
---|
101 | ] |
---|
102 | }); |
---|
103 | |
---|
104 | // used to add records to the destination stores |
---|
105 | var blankRecord = Ext.data.Record.create(fields); |
---|
106 | |
---|
107 | /**** |
---|
108 | * Setup Drop Targets |
---|
109 | ***/ |
---|
110 | // This will make sure we only drop to the view container |
---|
111 | var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1]; |
---|
112 | var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, { |
---|
113 | ddGroup : 'firstGridDDGroup', |
---|
114 | copy : true, |
---|
115 | notifyDrop : function(ddSource, e, data){ |
---|
116 | |
---|
117 | // Generic function to add records. |
---|
118 | function addRow(record, index, allItems) { |
---|
119 | |
---|
120 | // Search for duplicates |
---|
121 | var foundItem = firstGridStore.findExact('name', record.data.name); |
---|
122 | // if not found |
---|
123 | if (foundItem == -1) { |
---|
124 | firstGridStore.add(record); |
---|
125 | |
---|
126 | // Call a sort dynamically |
---|
127 | firstGridStore.sort('name', 'ASC'); |
---|
128 | |
---|
129 | //Remove Record from the source |
---|
130 | ddSource.grid.store.remove(record); |
---|
131 | } |
---|
132 | } |
---|
133 | |
---|
134 | // Loop through the selections |
---|
135 | Ext.each(ddSource.dragData.selections ,addRow); |
---|
136 | return(true); |
---|
137 | } |
---|
138 | }); |
---|
139 | |
---|
140 | |
---|
141 | // This will make sure we only drop to the view container |
---|
142 | var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1] |
---|
143 | |
---|
144 | var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, { |
---|
145 | ddGroup : 'secondGridDDGroup', |
---|
146 | copy : false, |
---|
147 | notifyDrop : function(ddSource, e, data){ |
---|
148 | |
---|
149 | // Generic function to add records. |
---|
150 | function addRow(record, index, allItems) { |
---|
151 | |
---|
152 | // Search for duplicates |
---|
153 | var foundItem = secondGridStore.findExact('name', record.data.name); |
---|
154 | // if not found |
---|
155 | if (foundItem == -1) { |
---|
156 | secondGridStore.add(record); |
---|
157 | // Call a sort dynamically |
---|
158 | secondGridStore.sort('name', 'ASC'); |
---|
159 | |
---|
160 | //Remove Record from the source |
---|
161 | ddSource.grid.store.remove(record); |
---|
162 | } |
---|
163 | } |
---|
164 | // Loop through the selections |
---|
165 | Ext.each(ddSource.dragData.selections ,addRow); |
---|
166 | return(true); |
---|
167 | } |
---|
168 | }); |
---|
169 | }); |
---|