1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | /* |
---|
10 | * Ext JS Library 2.1 |
---|
11 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
12 | * licensing@extjs.com |
---|
13 | * |
---|
14 | * http://extjs.com/license |
---|
15 | */ |
---|
16 | |
---|
17 | Ext.onReady(function(){ |
---|
18 | |
---|
19 | var myData = { |
---|
20 | records : [ |
---|
21 | { name : "Record 0", column1 : "0", column2 : "0" }, |
---|
22 | { name : "Record 1", column1 : "1", column2 : "1" }, |
---|
23 | { name : "Record 2", column1 : "2", column2 : "2" }, |
---|
24 | { name : "Record 3", column1 : "3", column2 : "3" }, |
---|
25 | { name : "Record 4", column1 : "4", column2 : "4" }, |
---|
26 | { name : "Record 5", column1 : "5", column2 : "5" }, |
---|
27 | { name : "Record 6", column1 : "6", column2 : "6" }, |
---|
28 | { name : "Record 7", column1 : "7", column2 : "7" }, |
---|
29 | { name : "Record 8", column1 : "8", column2 : "8" }, |
---|
30 | { name : "Record 9", column1 : "9", column2 : "9" } |
---|
31 | ] |
---|
32 | }; |
---|
33 | |
---|
34 | |
---|
35 | // Generic fields array to use in both store defs. |
---|
36 | var fields = [ |
---|
37 | {name: 'name', mapping : 'name'}, |
---|
38 | {name: 'column1', mapping : 'column1'}, |
---|
39 | {name: 'column2', mapping : 'column2'} |
---|
40 | ]; |
---|
41 | |
---|
42 | // create the data store |
---|
43 | var gridStore = new Ext.data.JsonStore({ |
---|
44 | fields : fields, |
---|
45 | data : myData, |
---|
46 | root : 'records' |
---|
47 | }); |
---|
48 | |
---|
49 | |
---|
50 | // Column Model shortcut array |
---|
51 | var cols = [ |
---|
52 | { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'}, |
---|
53 | {header: "column1", width: 50, sortable: true, dataIndex: 'column1'}, |
---|
54 | {header: "column2", width: 50, sortable: true, dataIndex: 'column2'} |
---|
55 | ]; |
---|
56 | |
---|
57 | // declare the source Grid |
---|
58 | var grid = new Ext.grid.GridPanel({ |
---|
59 | ddGroup : 'gridDDGroup', |
---|
60 | store : gridStore, |
---|
61 | columns : cols, |
---|
62 | enableDragDrop : true, |
---|
63 | stripeRows : true, |
---|
64 | autoExpandColumn : 'name', |
---|
65 | width : 325, |
---|
66 | region : 'west', |
---|
67 | title : 'Data Grid', |
---|
68 | selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) |
---|
69 | }); |
---|
70 | |
---|
71 | |
---|
72 | |
---|
73 | // Declare the text fields. This could have been done inline, is easier to read |
---|
74 | // for folks learning :) |
---|
75 | var textField1 = new Ext.form.TextField({ |
---|
76 | fieldLabel : 'Record Name', |
---|
77 | name : 'name' |
---|
78 | }); |
---|
79 | |
---|
80 | |
---|
81 | var textField2 = new Ext.form.TextField({ |
---|
82 | fieldLabel : 'Column 1', |
---|
83 | name : 'column1' |
---|
84 | }); |
---|
85 | |
---|
86 | |
---|
87 | var textField3 = new Ext.form.TextField({ |
---|
88 | fieldLabel : 'Column 2', |
---|
89 | name : 'column2' |
---|
90 | }); |
---|
91 | |
---|
92 | |
---|
93 | // Setup the form panel |
---|
94 | var formPanel = new Ext.form.FormPanel({ |
---|
95 | region : 'center', |
---|
96 | title : 'Generic Form Panel', |
---|
97 | bodyStyle : 'padding: 10px; background-color: #DFE8F6', |
---|
98 | labelWidth : 100, |
---|
99 | width : 325, |
---|
100 | items : [ |
---|
101 | textField1, |
---|
102 | textField2, |
---|
103 | textField3 |
---|
104 | ] |
---|
105 | }); |
---|
106 | |
---|
107 | |
---|
108 | |
---|
109 | //Simple 'border layout' panel to house both grids |
---|
110 | var displayPanel = new Ext.Panel({ |
---|
111 | width : 650, |
---|
112 | height : 300, |
---|
113 | layout : 'border', |
---|
114 | renderTo : 'panel', |
---|
115 | items : [ |
---|
116 | grid, |
---|
117 | formPanel |
---|
118 | ], |
---|
119 | bbar : [ |
---|
120 | '->', // Fill |
---|
121 | { |
---|
122 | text : 'Reset Example', |
---|
123 | handler : function() { |
---|
124 | //refresh source grid |
---|
125 | gridStore.loadData(myData); |
---|
126 | formPanel.getForm().reset(); |
---|
127 | } |
---|
128 | } |
---|
129 | ] |
---|
130 | }); |
---|
131 | |
---|
132 | |
---|
133 | // used to add records to the destination stores |
---|
134 | var blankRecord = Ext.data.Record.create(fields); |
---|
135 | |
---|
136 | /**** |
---|
137 | * Setup Drop Targets |
---|
138 | ***/ |
---|
139 | |
---|
140 | // This will make sure we only drop to the view container |
---|
141 | var formPanelDropTargetEl = formPanel.body.dom; |
---|
142 | |
---|
143 | var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, { |
---|
144 | ddGroup : 'gridDDGroup', |
---|
145 | notifyEnter : function(ddSource, e, data) { |
---|
146 | |
---|
147 | //Add some flare to invite drop. |
---|
148 | formPanel.body.stopFx(); |
---|
149 | formPanel.body.highlight(); |
---|
150 | }, |
---|
151 | notifyDrop : function(ddSource, e, data){ |
---|
152 | |
---|
153 | // Reference the record (single selection) for readability |
---|
154 | var selectedRecord = ddSource.dragData.selections[0]; |
---|
155 | |
---|
156 | |
---|
157 | // Load the record into the form |
---|
158 | formPanel.getForm().loadRecord(selectedRecord); |
---|
159 | |
---|
160 | |
---|
161 | // Delete record from the grid. not really required. |
---|
162 | ddSource.grid.store.remove(selectedRecord); |
---|
163 | |
---|
164 | return(true); |
---|
165 | } |
---|
166 | }); |
---|
167 | |
---|
168 | |
---|
169 | }); |
---|