examples/dd/dragdropzones.js

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