/ext-4.1.0_b3/docs/extjs/examples/dd/dragdropzones.js

  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}