Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / dd / dnd_grid_to_formpanel.js
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 : "Record 0", column1 : "0", column2 : "0" },
12                         { name : "Record 1", column1 : "1", column2 : "1" },
13                         { name : "Record 2", column1 : "2", column2 : "2" },
14                         { name : "Record 3", column1 : "3", column2 : "3" },
15                         { name : "Record 4", column1 : "4", column2 : "4" },
16                         { name : "Record 5", column1 : "5", column2 : "5" },
17                         { name : "Record 6", column1 : "6", column2 : "6" },
18                         { name : "Record 7", column1 : "7", column2 : "7" },
19                         { name : "Record 8", column1 : "8", column2 : "8" },
20                         { name : "Record 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 gridStore = 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 grid = new Ext.grid.GridPanel({
49                 ddGroup          : 'gridDDGroup',
50         store            : gridStore,
51         columns          : cols,
52                 enableDragDrop   : true,
53         stripeRows       : true,
54         autoExpandColumn : 'name',
55         width            : 325,
56                 region           : 'west',
57         title            : 'Data Grid',
58                 selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
59     });
60
61
62
63         // Declare the text fields.  This could have been done inline, is easier to read
64         // for folks learning :)
65         var textField1 = new Ext.form.TextField({
66                 fieldLabel : 'Record Name',
67                 name       : 'name'
68         });
69
70
71         var textField2 = new Ext.form.TextField({
72                 fieldLabel : 'Column 1',
73                 name       : 'column1'
74         });
75
76
77         var textField3 = new Ext.form.TextField({
78                 fieldLabel : 'Column 2',
79                 name       : 'column2'
80         });
81
82
83         // Setup the form panel
84         var formPanel = new Ext.form.FormPanel({
85                 region     : 'center',
86                 title      : 'Generic Form Panel',
87                 bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
88                 labelWidth : 100,
89                 width      : 325,
90                 items      : [
91                         textField1,
92                         textField2,
93                         textField3
94                 ]
95         });
96
97
98
99         //Simple 'border layout' panel to house both grids
100         var displayPanel = new Ext.Panel({
101                 width    : 650,
102                 height   : 300,
103                 layout   : 'border',
104                 renderTo : 'panel',
105                 items    : [
106                         grid,
107                         formPanel
108                 ],
109                 bbar    : [
110                         '->', // Fill
111                         {
112                                 text    : 'Reset Example',
113                                 handler : function() {
114                                         //refresh source grid
115                                         gridStore.loadData(myData);
116                                         formPanel.getForm().reset();
117                                 }
118                         }
119                 ]
120         });
121
122
123         // used to add records to the destination stores
124         var blankRecord =  Ext.data.Record.create(fields);
125
126         /****
127         * Setup Drop Targets
128         ***/
129
130         // This will make sure we only drop to the view container
131         var formPanelDropTargetEl =  formPanel.body.dom;
132
133         var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
134                 ddGroup     : 'gridDDGroup',
135                 notifyEnter : function(ddSource, e, data) {
136
137                         //Add some flare to invite drop.
138                         formPanel.body.stopFx();
139                         formPanel.body.highlight();
140                 },
141                 notifyDrop  : function(ddSource, e, data){
142
143                         // Reference the record (single selection) for readability
144                         var selectedRecord = ddSource.dragData.selections[0];
145
146
147                         // Load the record into the form
148                         formPanel.getForm().loadRecord(selectedRecord);
149
150
151                         // Delete record from the grid.  not really required.
152                         ddSource.grid.store.remove(selectedRecord);
153
154                         return(true);
155                 }
156         });
157
158
159 });