Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / examples / dd / dnd_grid_to_formpanel.js
1 /*
2
3 This file is part of Ext JS 4
4
5 Copyright (c) 2011 Sencha Inc
6
7 Contact:  http://www.sencha.com/contact
8
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
11
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
13
14 */
15 Ext.require(['*']);
16
17 Ext.onReady(function(){
18
19     var myData = [
20         { name : "Record 0", column1 : "0", column2 : "0" },
21         { name : "Record 1", column1 : "1", column2 : "1" },
22         { name : "Record 2", column1 : "2", column2 : "2" },
23         { name : "Record 3", column1 : "3", column2 : "3" },
24         { name : "Record 4", column1 : "4", column2 : "4" },
25         { name : "Record 5", column1 : "5", column2 : "5" },
26         { name : "Record 6", column1 : "6", column2 : "6" },
27         { name : "Record 7", column1 : "7", column2 : "7" },
28         { name : "Record 8", column1 : "8", column2 : "8" },
29         { name : "Record 9", column1 : "9", column2 : "9" }
30     ];
31
32     // Generic fields array to use in both store defs.
33     Ext.define('DataObject', {
34         extend: 'Ext.data.Model',
35         fields: [
36             {name: 'name', mapping : 'name'},
37             {name: 'column1', mapping : 'column1'},
38             {name: 'column2', mapping : 'column2'}
39         ]
40     });
41
42     // create the data store
43     var gridStore = Ext.create('Ext.data.Store', {
44         model  : 'DataObject',
45         data   : myData
46     });
47
48     // Column Model shortcut array
49     var columns = [
50         { id : 'name',      flex:  1,  header: "Record Name", sortable: true, dataIndex: 'name'},
51         {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
52         {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
53     ];
54
55     // declare the source Grid
56     var grid = Ext.create('Ext.grid.Panel', {
57         viewConfig: {
58             plugins: {
59                 ddGroup: 'GridExample',
60                 ptype: 'gridviewdragdrop',
61                 enableDrop: false
62             }
63         },
64         store            : gridStore,
65         columns          : columns,
66         enableDragDrop   : true,
67         stripeRows       : true,
68         width            : 325,
69         margins          : '0 2 0 0',
70         region           : 'west',
71         title            : 'Data Grid',
72         selModel         : Ext.create('Ext.selection.RowModel', {singleSelect : true})
73     });
74
75     // Declare the text fields.  This could have been done inline, is easier to read
76     // for folks learning :)
77     var textField1 = Ext.create('Ext.form.field.Text', {
78         fieldLabel : 'Record Name',
79         name       : 'name'
80     });
81
82     var textField2 = Ext.create('Ext.form.field.Text', {
83         fieldLabel : 'Column 1',
84         name       : 'column1'
85     });
86
87     var textField3 = Ext.create('Ext.form.field.Text', {
88         fieldLabel : 'Column 2',
89         name       : 'column2'
90     });
91
92     // Setup the form panel
93     var formPanel = Ext.create('Ext.form.Panel', {
94         region     : 'center',
95         title      : 'Generic Form Panel',
96         bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
97         labelWidth : 100,
98         width      : 325,
99         margins    : '0 0 0 3',
100         items      : [
101             textField1,
102             textField2,
103             textField3
104         ]
105     });
106
107     //Simple 'border layout' panel to house both grids
108     var displayPanel = Ext.create('Ext.Panel', {
109         width    : 650,
110         height   : 300,
111         layout   : 'border',
112         renderTo : 'panel',
113         bodyPadding: '5',
114         items    : [
115             grid,
116             formPanel
117         ],
118         bbar    : [
119             '->', // Fill
120             {
121                 text    : 'Reset Example',
122                 handler : function() {
123                     //refresh source grid
124                     gridStore.loadData(myData);
125                     formPanel.getForm().reset();
126                 }
127             }
128         ]
129     });
130
131     /****
132     * Setup Drop Targets
133     ***/
134
135     // This will make sure we only drop to the view container
136     var formPanelDropTargetEl =  formPanel.body.dom;
137
138     var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', formPanelDropTargetEl, {
139         ddGroup: 'GridExample',
140         notifyEnter: function(ddSource, e, data) {
141
142             //Add some flare to invite drop.
143             formPanel.body.stopAnimation();
144             formPanel.body.highlight();
145         },
146         notifyDrop  : function(ddSource, e, data){
147
148             // Reference the record (single selection) for readability
149             var selectedRecord = ddSource.dragData.records[0];
150
151             // Load the record into the form
152             formPanel.getForm().loadRecord(selectedRecord);
153
154             // Delete record from the source store.  not really required.
155             ddSource.view.store.remove(selectedRecord);
156
157             return true;
158         }
159     });
160 });
161