3 Ext.onReady(function() {
6 insuranceCode: '11111',
8 address: 'Main Street',
9 telephone: '555 1234 123'
11 insuranceCode: '22222',
14 telephone: '666 666 666'
16 insuranceCode: '33333',
18 address: 'Over The Rainbow',
19 telephone: '555 321 0987'
21 insuranceCode: '44444',
23 address: 'Blimp Street',
24 telephone: '555 111 2222'
26 insuranceCode: '55555',
27 name: 'Fred Douglass',
28 address: 'Talbot County, Maryland',
32 Ext.define('Patient', {
33 extend: 'Ext.data.Model',
34 idProperty: 'insuranceCode',
44 var patientStore = Ext.create('Ext.data.Store', {
52 address: 'Westminster Bridge Road, SE1 7EH',
53 telephone: '020 7188 7188'
56 name: 'Queen\'s Medical Centre',
57 address: 'Derby Road, NG7 2UH',
58 telephone: '0115 924 9924'
61 name: 'Saint Bartholomew',
62 address: 'West Smithfield, EC1A 7BE',
63 telephone: '020 7377 7000'
67 address: 'Whitechapel, E1 1BB',
68 telephone: '020 7377 7000'
71 Ext.define('Hospital', {
72 extend: 'Ext.data.Model',
83 var hospitalStore = Ext.create('Ext.data.Store', {
88 var patientView = Ext.create('Ext.view.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>' +
97 itemSelector: 'div.patient-source',
98 overItemCls: 'patient-over',
99 selectedItemClass: 'patient-selected',
103 render: initializePatientDragZone
107 var helpWindow = Ext.create('Ext.Window', {
108 title: 'Source code',
113 '<textarea readonly class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl><tpl if="frame"> {baseCls}-body-framed</tpl><tpl if="ui"> {baseCls}-body-{ui}</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'
116 render: function(w) {
118 url: 'dragdropzones.js',
119 success: function(r) {
120 w.body.dom.value = r.responseText;
127 var hospitalGrid = Ext.create('Ext.grid.Panel', {
133 handler: function() {
137 sortableColumns: false,
143 dataIndex: 'address',
147 dataIndex: 'telephone',
153 rowBodyDivCls: 'hospital-target',
154 getAdditionalData: function() {
155 return Ext.apply(Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments), {
156 rowBody: 'Drop Patient Here'
162 render: initializeHospitalDropZone
168 Ext.create('Ext.Viewport', {
174 html: '<h1>Patient Hospital Assignment</h1>',
187 * Here is where we "activate" the DataView.
188 * We have decided that each node with the class "patient-source" encapsulates a single draggable
191 * So we inject code into the DragZone which, when passed a mousedown event, interrogates
192 * the event to see if it was within an element with the class "patient-source". If so, we
193 * return non-null drag data.
195 * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
196 * The data must contain a property called "ddel" which is a DOM element which provides an image
197 * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
198 * We can insert any other data into the data object, and this will be used by a cooperating DropZone
199 * to perform the drop operation.
201 function initializePatientDragZone(v) {
202 v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
204 // On receipt of a mousedown event, see if it is within a draggable element.
205 // Return a drag data object if so. The data object can contain arbitrary application
206 // data, but it should also contain a DOM element in the ddel property to provide
208 getDragData: function(e) {
209 var sourceEl = e.getTarget(v.itemSelector, 10), d;
211 d = sourceEl.cloneNode(true);
213 return v.dragData = {
215 repairXY: Ext.fly(sourceEl).getXY(),
217 patientData: v.getRecord(sourceEl).data
222 // Provide coordinates for the proxy to slide back to on failed drag.
223 // This is the original XY coordinates of the draggable element.
224 getRepairXY: function() {
225 return this.dragData.repairXY;
231 * Here is where we "activate" the GridPanel.
232 * We have decided that the element with class "hospital-target" is the element which can receieve
233 * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
234 * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
235 * the mouse if over an element which can receieve drop gestures.
237 * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
238 * call several "onNodeXXXX" methods at various points. These include:
245 * We provide implementations of each of these to provide behaviour for these events.
247 function initializeHospitalDropZone(v) {
249 grid = gridView.up('gridpanel');
251 grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
253 // If the mouse is over a target node, return that node. This is
254 // provided as the "target" parameter in all "onNodeXXXX" node event handling functions
255 getTargetFromEvent: function(e) {
256 return e.getTarget('.hospital-target');
259 // On entry into a target node, highlight that node.
260 onNodeEnter : function(target, dd, e, data){
261 Ext.fly(target).addCls('hospital-target-hover');
264 // On exit from a target node, unhighlight that node.
265 onNodeOut : function(target, dd, e, data){
266 Ext.fly(target).removeCls('hospital-target-hover');
269 // While over a target node, return the default drop allowed class which
270 // places a "tick" icon into the drag proxy.
271 onNodeOver : function(target, dd, e, data){
272 return Ext.dd.DropZone.prototype.dropAllowed;
275 // On node drop, we can interrogate the target node to find the underlying
276 // application object that is the real target of the dragged data.
277 // In this case, it is a Record in the GridPanel's Store.
278 // We can use the data set up by the DragZone's getDragData method to read
279 // any data we decided to attach.
280 onNodeDrop : function(target, dd, e, data){
281 var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
282 mainRow = rowBody.previousSibling,
283 h = gridView.getRecord(mainRow),
284 targetEl = Ext.get(target);
286 targetEl.update(data.patientData.name + ', ' + targetEl.dom.innerHTML);
287 Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
288 ' on hospital ' + h.data.name);