/ext-4.1.0_b3/docs/extjs/examples/dd/dragdropzones.js

https://bitbucket.org/srogerf/javascript · JavaScript · 296 lines · 225 code · 22 blank · 49 comment · 1 complexity · 0bd8a624fd17fb0c67a6c3c8c6249793 MD5 · raw file

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