docs/source/dragdropzones.html

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