3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
17 Ext.onReady(function() {
20 insuranceCode: '11111',
22 address: 'Main Street',
23 telephone: '555 1234 123'
25 insuranceCode: '22222',
28 telephone: '666 666 666'
30 insuranceCode: '33333',
32 address: 'Over The Rainbow',
33 telephone: '555 321 0987'
35 insuranceCode: '44444',
37 address: 'Blimp Street',
38 telephone: '555 111 2222'
40 insuranceCode: '55555',
41 name: 'Fred Douglass',
42 address: 'Talbot County, Maryland',
46 Ext.define('Patient', {
47 extend: 'Ext.data.Model',
48 idProperty: 'insuranceCode',
58 var patientStore = Ext.create('Ext.data.Store', {
66 address: 'Westminster Bridge Road, SE1 7EH',
67 telephone: '020 7188 7188'
70 name: 'Queen\'s Medical Centre',
71 address: 'Derby Road, NG7 2UH',
72 telephone: '0115 924 9924'
75 name: 'Saint Bartholomew',
76 address: 'West Smithfield, EC1A 7BE',
77 telephone: '020 7377 7000'
81 address: 'Whitechapel, E1 1BB',
82 telephone: '020 7377 7000'
85 Ext.define('Hospital', {
86 extend: 'Ext.data.Model',
97 var hospitalStore = Ext.create('Ext.data.Store', {
102 var patientView = Ext.create('Ext.view.View', {
104 tpl: '<tpl for=".">' +
105 '<div class="patient-source"><table><tbody>' +
106 '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +
107 '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +
108 '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +
109 '</tbody></table></div>' +
111 itemSelector: 'div.patient-source',
112 overItemCls: 'patient-over',
113 selectedItemClass: 'patient-selected',
117 render: initializePatientDragZone
121 var helpWindow = Ext.create('Ext.Window', {
122 title: 'Source code',
130 itemId: 'srcTextArea'
134 render: function(w) {
136 url: 'dragdropzones.js',
137 success: function(r) {
138 w.down('#srcTextArea').setValue(r.responseText);
145 var hospitalGrid = Ext.create('Ext.grid.Panel', {
151 handler: function() {
155 sortableColumns: false,
161 dataIndex: 'address',
165 dataIndex: 'telephone',
171 rowBodyDivCls: 'hospital-target',
172 getAdditionalData: function() {
173 return Ext.apply(Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments), {
174 rowBody: 'Drop Patient Here'
180 render: initializeHospitalDropZone
186 Ext.create('Ext.Viewport', {
192 html: '<h1>Patient Hospital Assignment</h1>',
205 * Here is where we "activate" the DataView.
206 * We have decided that each node with the class "patient-source" encapsulates a single draggable
209 * So we inject code into the DragZone which, when passed a mousedown event, interrogates
210 * the event to see if it was within an element with the class "patient-source". If so, we
211 * return non-null drag data.
213 * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
214 * The data must contain a property called "ddel" which is a DOM element which provides an image
215 * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
216 * We can insert any other data into the data object, and this will be used by a cooperating DropZone
217 * to perform the drop operation.
219 function initializePatientDragZone(v) {
220 v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
222 // On receipt of a mousedown event, see if it is within a draggable element.
223 // Return a drag data object if so. The data object can contain arbitrary application
224 // data, but it should also contain a DOM element in the ddel property to provide
226 getDragData: function(e) {
227 var sourceEl = e.getTarget(v.itemSelector, 10), d;
229 d = sourceEl.cloneNode(true);
231 return v.dragData = {
233 repairXY: Ext.fly(sourceEl).getXY(),
235 patientData: v.getRecord(sourceEl).data
240 // Provide coordinates for the proxy to slide back to on failed drag.
241 // This is the original XY coordinates of the draggable element.
242 getRepairXY: function() {
243 return this.dragData.repairXY;
249 * Here is where we "activate" the GridPanel.
250 * We have decided that the element with class "hospital-target" is the element which can receieve
251 * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
252 * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
253 * the mouse if over an element which can receieve drop gestures.
255 * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
256 * call several "onNodeXXXX" methods at various points. These include:
263 * We provide implementations of each of these to provide behaviour for these events.
265 function initializeHospitalDropZone(v) {
267 grid = gridView.up('gridpanel');
269 grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
271 // If the mouse is over a target node, return that node. This is
272 // provided as the "target" parameter in all "onNodeXXXX" node event handling functions
273 getTargetFromEvent: function(e) {
274 return e.getTarget('.hospital-target');
277 // On entry into a target node, highlight that node.
278 onNodeEnter : function(target, dd, e, data){
279 Ext.fly(target).addCls('hospital-target-hover');
282 // On exit from a target node, unhighlight that node.
283 onNodeOut : function(target, dd, e, data){
284 Ext.fly(target).removeCls('hospital-target-hover');
287 // While over a target node, return the default drop allowed class which
288 // places a "tick" icon into the drag proxy.
289 onNodeOver : function(target, dd, e, data){
290 return Ext.dd.DropZone.prototype.dropAllowed;
293 // On node drop, we can interrogate the target node to find the underlying
294 // application object that is the real target of the dragged data.
295 // In this case, it is a Record in the GridPanel's Store.
296 // We can use the data set up by the DragZone's getDragData method to read
297 // any data we decided to attach.
298 onNodeDrop : function(target, dd, e, data){
299 var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
300 mainRow = rowBody.previousSibling,
301 h = gridView.getRecord(mainRow),
302 targetEl = Ext.get(target);
304 targetEl.update(data.patientData.name + ', ' + targetEl.dom.innerHTML);
305 Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
306 ' on hospital ' + h.data.name);