--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.onReady(function() {\r
+\r
+ var patients = [{\r
+ insuranceCode: '11111',\r
+ name: 'Fred Bloggs',\r
+ address: 'Main Street',\r
+ telephone: '555 1234 123'\r
+ }, {\r
+ insuranceCode: '22222',\r
+ name: 'Fred West',\r
+ address: 'Cromwell Street',\r
+ telephone: '666 666 666'\r
+ }, {\r
+ insuranceCode: '33333',\r
+ name: 'Fred Mercury',\r
+ address: 'Over The Rainbow',\r
+ telephone: '555 321 0987'\r
+ }, {\r
+ insuranceCode: '44444',\r
+ name: 'Fred Forsyth',\r
+ address: 'Blimp Street',\r
+ telephone: '555 111 2222'\r
+ }, {\r
+ insuranceCode: '55555',\r
+ name: 'Fred Douglass',\r
+ address: 'Talbot County, Maryland',\r
+ telephone: 'N/A'\r
+ }];\r
+\r
+ var PatientRecord = Ext.data.Record.create([{\r
+ name: 'name'\r
+ }, {\r
+ name: 'address'\r
+ }, {\r
+ name: 'telephone'\r
+ }]);\r
+\r
+ var patientStore = new Ext.data.Store({\r
+ data: patients,\r
+ reader: new Ext.data.JsonReader({\r
+ id: 'insuranceCode'\r
+ }, PatientRecord)\r
+ });\r
+\r
+ var hospitals = [{\r
+ code: 'AAAAA',\r
+ name: 'Saint Thomas',\r
+ address: 'Westminster Bridge Road, SE1 7EH',\r
+ telephone: '020 7188 7188'\r
+ }, {\r
+ code: 'BBBBB',\r
+ name: 'Queen\'s Medical Centre',\r
+ address: 'Derby Road, NG7 2UH',\r
+ telephone: '0115 924 9924'\r
+ }, {\r
+ code: 'CCCCC',\r
+ name: 'Saint Bartholomew',\r
+ address: 'West Smithfield, EC1A 7BE',\r
+ telephone: '020 7377 7000'\r
+ }, {\r
+ code: 'DDDDD',\r
+ name: 'Royal London',\r
+ address: 'Whitechapel, E1 1BB',\r
+ telephone: '020 7377 7000'\r
+ }];\r
+ \r
+ var HospitalRecord = Ext.data.Record.create([{\r
+ name: 'name'\r
+ }, {\r
+ name: 'address'\r
+ }, {\r
+ name: 'telephone'\r
+ }]);\r
+\r
+ var hospitalStore = new Ext.data.Store({\r
+ data: hospitals,\r
+ reader: new Ext.data.JsonReader({\r
+ id: 'code'\r
+ }, HospitalRecord)\r
+ });\r
+ \r
+ var patientView = new Ext.DataView({\r
+ cls: 'patient-view',\r
+ tpl: '<tpl for=".">' +\r
+ '<div class="patient-source"><table><tbody>' +\r
+ '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +\r
+ '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +\r
+ '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +\r
+ '</tbody></table></div>' +\r
+ '</tpl>',\r
+ itemSelector: 'div.patient-source',\r
+ store: patientStore,\r
+ listeners: {\r
+ render: initializePatientDragZone\r
+ }\r
+ });\r
+\r
+ var helpWindow = new Ext.Window({\r
+ title: 'Source code',\r
+ width: 920,\r
+ height: 500,\r
+ closeAction: 'hide',\r
+ bodyCfg: {tag: 'textarea', readonly: true},\r
+ bodyStyle: {\r
+ backgroundColor: 'white',\r
+ margin: '0px',\r
+ border: '0px none'\r
+ },\r
+ listeners: {\r
+ render: function(w) {\r
+ Ext.Ajax.request({\r
+ url: 'dragdropzones.js',\r
+ success: function(r) {\r
+ w.body.dom.value = r.responseText;\r
+ }\r
+ });\r
+ }\r
+ }\r
+ });\r
+\r
+ var hospitalGrid = new Ext.grid.GridPanel({\r
+ title: 'Hospitals',\r
+ region: 'center',\r
+ margins: '0 5 5 0',\r
+ bbar: [{\r
+ text: 'View Source',\r
+ handler: function() {\r
+ helpWindow.show();\r
+ }\r
+ }],\r
+ columns: [{\r
+ dataIndex: 'name',\r
+ header: 'Name',\r
+ width: 200\r
+ }, {\r
+ dataIndex: 'address',\r
+ header: 'Address',\r
+ width: 300\r
+ }, {\r
+ dataIndex: 'telephone',\r
+ header: 'Telephone',\r
+ width: 100\r
+ }],\r
+ viewConfig: {\r
+ tpl: new Ext.XTemplate('<div class="hospital-target"></div>'),\r
+ enableRowBody: true,\r
+ getRowClass: function(rec, idx, p, store) {\r
+ p.body = this.tpl.apply(rec.data);\r
+ }\r
+ },\r
+ store: hospitalStore,\r
+ listeners: {\r
+ render: initializeHospitalDropZone\r
+ }\r
+ });\r
+\r
+ new Ext.Viewport({\r
+ layout: 'border',\r
+ items: [{\r
+ cls: 'app-header',\r
+ region: 'north',\r
+ height: 100,\r
+ html: '<h1>Patient Hospital Assignment</h1>',\r
+ margins: '5 5 5 5'\r
+ }, {\r
+ title: 'Patients',\r
+ region: 'west',\r
+ width: 300,\r
+ margins: '0 5 5 5',\r
+ items: patientView\r
+ }, hospitalGrid ]\r
+ });\r
+});\r
+\r
+/*\r
+ * Here is where we "activate" the DataView.\r
+ * We have decided that each node with the class "patient-source" encapsulates a single draggable\r
+ * object.\r
+ *\r
+ * So we inject code into the DragZone which, when passed a mousedown event, interrogates\r
+ * the event to see if it was within an element with the class "patient-source". If so, we\r
+ * return non-null drag data.\r
+ *\r
+ * Returning non-null drag data indicates that the mousedown event has begun a dragging process.\r
+ * The data must contain a property called "ddel" which is a DOM element which provides an image\r
+ * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.\r
+ * We can insert any other data into the data object, and this will be used by a cooperating DropZone\r
+ * to perform the drop operation.\r
+ */\r
+function initializePatientDragZone(v) {\r
+ v.dragZone = new Ext.dd.DragZone(v.getEl(), {\r
+\r
+// On receipt of a mousedown event, see if it is within a draggable element.\r
+// Return a drag data object if so. The data object can contain arbitrary application\r
+// data, but it should also contain a DOM element in the ddel property to provide\r
+// a proxy to drag.\r
+ getDragData: function(e) {\r
+ var sourceEl = e.getTarget(v.itemSelector, 10);\r
+ if (sourceEl) {\r
+ d = sourceEl.cloneNode(true);\r
+ d.id = Ext.id();\r
+ return v.dragData = {\r
+ sourceEl: sourceEl,\r
+ repairXY: Ext.fly(sourceEl).getXY(),\r
+ ddel: d,\r
+ patientData: v.getRecord(sourceEl).data\r
+ }\r
+ }\r
+ },\r
+\r
+// Provide coordinates for the proxy to slide back to on failed drag.\r
+// This is the original XY coordinates of the draggable element.\r
+ getRepairXY: function() {\r
+ return this.dragData.repairXY;\r
+ }\r
+ });\r
+}\r
+\r
+/*\r
+ * Here is where we "activate" the GridPanel.\r
+ * We have decided that the element with class "hospital-target" is the element which can receieve\r
+ * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called\r
+ * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that\r
+ * the mouse if over an element which can receieve drop gestures.\r
+ *\r
+ * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then\r
+ * call several "onNodeXXXX" methods at various points. These include:\r
+ *\r
+ * onNodeEnter\r
+ * onNodeOut\r
+ * onNodeOver\r
+ * onNodeDrop\r
+ *\r
+ * We provide implementations of each of these to provide behaviour for these events.\r
+ */\r
+function initializeHospitalDropZone(g) {\r
+ g.dropZone = new Ext.dd.DropZone(g.getView().scroller, {\r
+\r
+// If the mouse is over a target node, return that node. This is\r
+// provided as the "target" parameter in all "onNodeXXXX" node event handling functions\r
+ getTargetFromEvent: function(e) {\r
+ return e.getTarget('.hospital-target');\r
+ },\r
+\r
+// On entry into a target node, highlight that node.\r
+ onNodeEnter : function(target, dd, e, data){ \r
+ Ext.fly(target).addClass('hospital-target-hover');\r
+ },\r
+\r
+// On exit from a target node, unhighlight that node.\r
+ onNodeOut : function(target, dd, e, data){ \r
+ Ext.fly(target).removeClass('hospital-target-hover');\r
+ },\r
+\r
+// While over a target node, return the default drop allowed class which\r
+// places a "tick" icon into the drag proxy.\r
+ onNodeOver : function(target, dd, e, data){ \r
+ return Ext.dd.DropZone.prototype.dropAllowed;\r
+ },\r
+\r
+// On node drop, we can interrogate the target node to find the underlying\r
+// application object that is the real target of the dragged data.\r
+// In this case, it is a Record in the GridPanel's Store.\r
+// We can use the data set up by the DragZone's getDragData method to read\r
+// any data we decided to attach.\r
+ onNodeDrop : function(target, dd, e, data){\r
+ var rowIndex = g.getView().findRowIndex(target);\r
+ var h = g.getStore().getAt(rowIndex);\r
+ Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +\r
+ ' on hospital ' + h.data.name);\r
+ return true;\r
+ }\r
+ });\r
+}</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff