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 | }); |
---|