Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / dd / dnd_grid_to_grid.js
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.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         title            : 'First Grid'
56     });
57
58     var secondGridStore = new Ext.data.JsonStore({
59         fields : fields,
60                 root   : 'records'
61     });
62
63     // create the destination Grid
64     var secondGrid = new Ext.grid.GridPanel({
65         ddGroup          : 'firstGridDDGroup',
66         store            : secondGridStore,
67         columns          : cols,
68         enableDragDrop   : true,
69         stripeRows       : true,
70         autoExpandColumn : 'name',
71         title            : 'Second Grid'
72     });
73
74
75         //Simple 'border layout' panel to house both grids
76         var displayPanel = new Ext.Panel({
77                 width        : 650,
78                 height       : 300,
79                 layout       : 'hbox',
80                 renderTo     : 'panel',
81                 defaults     : { flex : 1 }, //auto stretch
82                 layoutConfig : { align : 'stretch' },
83                 items        : [
84                         firstGrid,
85                         secondGrid
86                 ],
87                 bbar    : [
88                         '->', // Fill
89                         {
90                                 text    : 'Reset both grids',
91                                 handler : function() {
92                                         //refresh source grid
93                                         firstGridStore.loadData(myData);
94
95                                         //purge destination grid
96                                         secondGridStore.removeAll();
97                                 }
98                         }
99                 ]
100         });
101
102         // used to add records to the destination stores
103         var blankRecord =  Ext.data.Record.create(fields);
104
105         /****
106         * Setup Drop Targets
107         ***/
108         // This will make sure we only drop to the  view scroller element
109         var firstGridDropTargetEl =  firstGrid.getView().scroller.dom;
110         var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
111                 ddGroup    : 'firstGridDDGroup',
112                 notifyDrop : function(ddSource, e, data){
113                         var records =  ddSource.dragData.selections;
114                         Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
115                         firstGrid.store.add(records);
116                         firstGrid.store.sort('name', 'ASC');
117                         return true
118                 }
119         });
120
121
122         // This will make sure we only drop to the view scroller element
123         var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
124         var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
125                 ddGroup    : 'secondGridDDGroup',
126                 notifyDrop : function(ddSource, e, data){
127                         var records =  ddSource.dragData.selections;
128                         Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
129                         secondGrid.store.add(records);
130                         secondGrid.store.sort('name', 'ASC');
131                         return true
132                 }
133         });
134
135 });