/ext-4.1.0_b3/docs/extjs/examples/dd/dragdropzones.js
JavaScript | 296 lines | 225 code | 22 blank | 49 comment | 1 complexity | 0bd8a624fd17fb0c67a6c3c8c6249793 MD5 | raw file
1Ext.require(['*']);
2
3Ext.onReady(function() {
4
5 var patients = [{
6 insuranceCode: '11111',
7 name: 'Fred Bloggs',
8 address: 'Main Street',
9 telephone: '555 1234 123'
10 }, {
11 insuranceCode: '22222',
12 name: 'Fred Bansod',
13 address: 'Van Ness',
14 telephone: '666 666 666'
15 }, {
16 insuranceCode: '33333',
17 name: 'Fred Mercury',
18 address: 'Over The Rainbow',
19 telephone: '555 321 0987'
20 }, {
21 insuranceCode: '44444',
22 name: 'Fred Forsyth',
23 address: 'Blimp Street',
24 telephone: '555 111 2222'
25 }, {
26 insuranceCode: '55555',
27 name: 'Fred Douglass',
28 address: 'Talbot County, Maryland',
29 telephone: 'N/A'
30 }];
31
32 Ext.define('Patient', {
33 extend: 'Ext.data.Model',
34 idProperty: 'insuranceCode',
35 fields: [{
36 name: 'name'
37 }, {
38 name: 'address'
39 }, {
40 name: 'telephone'
41 }]
42 });
43
44 var patientStore = Ext.create('Ext.data.Store', {
45 model: 'Patient',
46 data: patients
47 });
48
49 var hospitals = [{
50 code: 'AAAAA',
51 name: 'Saint Thomas',
52 address: 'Westminster Bridge Road, SE1 7EH',
53 telephone: '020 7188 7188'
54 }, {
55 code: 'BBBBB',
56 name: 'Queen\'s Medical Centre',
57 address: 'Derby Road, NG7 2UH',
58 telephone: '0115 924 9924'
59 }, {
60 code: 'CCCCC',
61 name: 'Saint Bartholomew',
62 address: 'West Smithfield, EC1A 7BE',
63 telephone: '020 7377 7000'
64 }, {
65 code: 'DDDDD',
66 name: 'Royal London',
67 address: 'Whitechapel, E1 1BB',
68 telephone: '020 7377 7000'
69 }];
70
71 Ext.define('Hospital', {
72 extend: 'Ext.data.Model',
73 idProperty: 'code',
74 fields: [{
75 name: 'name'
76 }, {
77 name: 'address'
78 }, {
79 name: 'telephone'
80 }]
81 });
82
83 var hospitalStore = Ext.create('Ext.data.Store', {
84 model: 'Hospital',
85 data: hospitals
86 });
87
88 var patientView = Ext.create('Ext.view.View', {
89 cls: 'patient-view',
90 tpl: '<tpl for=".">' +
91 '<div class="patient-source"><table><tbody>' +
92 '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +
93 '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +
94 '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +
95 '</tbody></table></div>' +
96 '</tpl>',
97 itemSelector: 'div.patient-source',
98 overItemCls: 'patient-over',
99 selectedItemClass: 'patient-selected',
100 singleSelect: true,
101 store: patientStore,
102 listeners: {
103 render: initializePatientDragZone
104 }
105 });
106
107 var helpWindow = Ext.create('Ext.Window', {
108 title: 'Source code',
109 width: 920,
110 height: 500,
111 closeAction: 'hide',
112 layout: 'fit',
113 items: [
114 {
115 xtype: 'textarea',
116 itemId: 'srcTextArea'
117 }
118 ],
119 listeners: {
120 render: function(w) {
121 Ext.Ajax.request({
122 url: 'dragdropzones.js',
123 success: function(r) {
124 w.down('#srcTextArea').setValue(r.responseText);
125 }
126 });
127 }
128 }
129 });
130
131 var hospitalGrid = Ext.create('Ext.grid.Panel', {
132 title: 'Hospitals',
133 region: 'center',
134 margins: '0 5 5 0',
135 bbar: [{
136 text: 'View Source',
137 handler: function() {
138 helpWindow.show();
139 }
140 }],
141 sortableColumns: false,
142 columns: [{
143 dataIndex: 'name',
144 header: 'Name',
145 width: 200
146 }, {
147 dataIndex: 'address',
148 header: 'Address',
149 width: 300
150 }, {
151 dataIndex: 'telephone',
152 header: 'Telephone',
153 width: 100
154 }],
155 features: [{
156 ftype:'rowbody',
157 rowBodyDivCls: 'hospital-target',
158 getAdditionalData: function() {
159 return Ext.apply(Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments), {
160 rowBody: 'Drop Patient Here'
161 });
162 }
163 }],
164 viewConfig: {
165 listeners: {
166 render: initializeHospitalDropZone
167 }
168 },
169 store: hospitalStore
170 });
171
172 Ext.create('Ext.Viewport', {
173 layout: 'border',
174 items: [{
175 cls: 'app-header',
176 region: 'north',
177 height: 30,
178 html: '<h1>Patient Hospital Assignment</h1>',
179 margins: '5 5 5 5'
180 }, {
181 title: 'Patients',
182 region: 'west',
183 width: 300,
184 margins: '0 5 5 5',
185 items: patientView
186 }, hospitalGrid ]
187 });
188});
189
190/*
191 * Here is where we "activate" the DataView.
192 * We have decided that each node with the class "patient-source" encapsulates a single draggable
193 * object.
194 *
195 * So we inject code into the DragZone which, when passed a mousedown event, interrogates
196 * the event to see if it was within an element with the class "patient-source". If so, we
197 * return non-null drag data.
198 *
199 * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
200 * The data must contain a property called "ddel" which is a DOM element which provides an image
201 * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
202 * We can insert any other data into the data object, and this will be used by a cooperating DropZone
203 * to perform the drop operation.
204 */
205function initializePatientDragZone(v) {
206 v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
207
208// On receipt of a mousedown event, see if it is within a draggable element.
209// Return a drag data object if so. The data object can contain arbitrary application
210// data, but it should also contain a DOM element in the ddel property to provide
211// a proxy to drag.
212 getDragData: function(e) {
213 var sourceEl = e.getTarget(v.itemSelector, 10), d;
214 if (sourceEl) {
215 d = sourceEl.cloneNode(true);
216 d.id = Ext.id();
217 return v.dragData = {
218 sourceEl: sourceEl,
219 repairXY: Ext.fly(sourceEl).getXY(),
220 ddel: d,
221 patientData: v.getRecord(sourceEl).data
222 };
223 }
224 },
225
226// Provide coordinates for the proxy to slide back to on failed drag.
227// This is the original XY coordinates of the draggable element.
228 getRepairXY: function() {
229 return this.dragData.repairXY;
230 }
231 });
232}
233
234/*
235 * Here is where we "activate" the GridPanel.
236 * We have decided that the element with class "hospital-target" is the element which can receieve
237 * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
238 * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
239 * the mouse if over an element which can receieve drop gestures.
240 *
241 * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
242 * call several "onNodeXXXX" methods at various points. These include:
243 *
244 * onNodeEnter
245 * onNodeOut
246 * onNodeOver
247 * onNodeDrop
248 *
249 * We provide implementations of each of these to provide behaviour for these events.
250 */
251function initializeHospitalDropZone(v) {
252 var gridView = v,
253 grid = gridView.up('gridpanel');
254
255 grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
256
257// If the mouse is over a target node, return that node. This is
258// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
259 getTargetFromEvent: function(e) {
260 return e.getTarget('.hospital-target');
261 },
262
263// On entry into a target node, highlight that node.
264 onNodeEnter : function(target, dd, e, data){
265 Ext.fly(target).addCls('hospital-target-hover');
266 },
267
268// On exit from a target node, unhighlight that node.
269 onNodeOut : function(target, dd, e, data){
270 Ext.fly(target).removeCls('hospital-target-hover');
271 },
272
273// While over a target node, return the default drop allowed class which
274// places a "tick" icon into the drag proxy.
275 onNodeOver : function(target, dd, e, data){
276 return Ext.dd.DropZone.prototype.dropAllowed;
277 },
278
279// On node drop, we can interrogate the target node to find the underlying
280// application object that is the real target of the dragged data.
281// In this case, it is a Record in the GridPanel's Store.
282// We can use the data set up by the DragZone's getDragData method to read
283// any data we decided to attach.
284 onNodeDrop : function(target, dd, e, data){
285 var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
286 mainRow = rowBody.previousSibling,
287 h = gridView.getRecord(mainRow),
288 targetEl = Ext.get(target);
289
290 targetEl.update(data.patientData.name + ', ' + targetEl.dom.innerHTML);
291 Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
292 ' on hospital ' + h.data.name);
293 return true;
294 }
295 });
296}