X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/examples/dd/dragdropzones.js

diff --git a/examples/dd/dragdropzones.js b/examples/dd/dragdropzones.js
index 0541ee3e..4c87b4cc 100644
--- a/examples/dd/dragdropzones.js
+++ b/examples/dd/dragdropzones.js
@@ -1,9 +1,5 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.require(['*']);
+
 Ext.onReady(function() {
 
     var patients = [{
@@ -13,8 +9,8 @@ Ext.onReady(function() {
         telephone: '555 1234 123'
     }, {
         insuranceCode: '22222',
-        name: 'Fred West',
-        address: 'Cromwell Street',
+        name: 'Fred Bansod',
+        address: 'Van Ness',
         telephone: '666 666 666'
     }, {
         insuranceCode: '33333',
@@ -33,19 +29,21 @@ Ext.onReady(function() {
         telephone: 'N/A'
     }];
 
-    var PatientRecord = Ext.data.Record.create([{
-        name: 'name'
-    }, {
-        name: 'address'
-    }, {
-        name: 'telephone'
-    }]);
+    Ext.define('Patient', {
+        extend: 'Ext.data.Model',
+        idProperty: 'insuranceCode',
+        fields: [{
+                name: 'name'
+            }, {
+                name: 'address'
+            }, {
+                name: 'telephone'
+            }]
+    });
 
-    var patientStore = new Ext.data.Store({
-        data: patients,
-        reader: new Ext.data.JsonReader({
-            id: 'insuranceCode'
-        }, PatientRecord)
+    var patientStore = Ext.create('Ext.data.Store', {
+        model: 'Patient',
+        data: patients
     });
 
     var hospitals = [{
@@ -69,23 +67,25 @@ Ext.onReady(function() {
         address: 'Whitechapel, E1 1BB',
         telephone: '020 7377 7000'
     }];
-    
-    var HospitalRecord = Ext.data.Record.create([{
-        name: 'name'
-    }, {
-        name: 'address'
-    }, {
-        name: 'telephone'
-    }]);
 
-    var hospitalStore = new Ext.data.Store({
-        data: hospitals,
-        reader: new Ext.data.JsonReader({
-            id: 'code'
-        }, HospitalRecord)
+    Ext.define('Hospital', {
+        extend: 'Ext.data.Model',
+        idProperty: 'code',
+        fields: [{
+            name: 'name'
+        }, {
+            name: 'address'
+        }, {
+            name: 'telephone'
+        }]
+    });
+
+    var hospitalStore = Ext.create('Ext.data.Store', {
+        model: 'Hospital',
+        data: hospitals
     });
-    
-    var patientView = new Ext.DataView({
+
+    var patientView = Ext.create('Ext.view.View', {
         cls: 'patient-view',
         tpl: '<tpl for=".">' +
                 '<div class="patient-source"><table><tbody>' +
@@ -95,8 +95,8 @@ Ext.onReady(function() {
                 '</tbody></table></div>' +
              '</tpl>',
         itemSelector: 'div.patient-source',
-        overClass: 'patient-over',
-        selectedClass: 'patient-selected',
+        overItemCls: 'patient-over',
+        selectedItemClass: 'patient-selected',
         singleSelect: true,
         store: patientStore,
         listeners: {
@@ -104,17 +104,14 @@ Ext.onReady(function() {
         }
     });
 
-    var helpWindow = new Ext.Window({
+    var helpWindow = Ext.create('Ext.Window', {
         title: 'Source code',
         width: 920,
         height: 500,
         closeAction: 'hide',
-        bodyCfg: {tag: 'textarea', readonly: true},
-        bodyStyle: {
-            backgroundColor: 'white',
-            margin: '0px',
-            border: '0px none'
-        },
+        renderTpl: [
+            '<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>'
+        ],
         listeners: {
             render: function(w) {
                 Ext.Ajax.request({
@@ -127,7 +124,7 @@ Ext.onReady(function() {
         }
     });
 
-    var hospitalGrid = new Ext.grid.GridPanel({
+    var hospitalGrid = Ext.create('Ext.grid.Panel', {
         title: 'Hospitals',
         region: 'center',
         margins: '0 5 5 0',
@@ -137,6 +134,7 @@ Ext.onReady(function() {
                 helpWindow.show();
             }
         }],
+        sortableColumns: false,
         columns: [{
             dataIndex: 'name',
             header: 'Name',
@@ -150,20 +148,24 @@ Ext.onReady(function() {
             header: 'Telephone',
             width: 100
         }],
+        features: [{
+            ftype:'rowbody',
+            rowBodyDivCls: 'hospital-target',
+            getAdditionalData: function() {
+                return Ext.apply(Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments), {
+                    rowBody: 'Drop Patient Here'
+                });
+            }
+        }],
         viewConfig: {
-            tpl: new Ext.XTemplate('<div class="hospital-target">Drop Patient Here</div>'),
-            enableRowBody: true,
-            getRowClass: function(rec, idx, p, store) {
-                p.body = this.tpl.apply(rec.data);
+            listeners: {
+                render: initializeHospitalDropZone
             }
         },
-        store: hospitalStore,
-        listeners: {
-            render: initializeHospitalDropZone
-        }
+        store: hospitalStore
     });
 
-    new Ext.Viewport({
+    Ext.create('Ext.Viewport', {
         layout: 'border',
         items: [{
             cls: 'app-header',
@@ -197,14 +199,14 @@ Ext.onReady(function() {
  * to perform the drop operation.
  */
 function initializePatientDragZone(v) {
-    v.dragZone = new Ext.dd.DragZone(v.getEl(), {
+    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
 
 //      On receipt of a mousedown event, see if it is within a draggable element.
 //      Return a drag data object if so. The data object can contain arbitrary application
 //      data, but it should also contain a DOM element in the ddel property to provide
 //      a proxy to drag.
         getDragData: function(e) {
-            var sourceEl = e.getTarget(v.itemSelector, 10);
+            var sourceEl = e.getTarget(v.itemSelector, 10), d;
             if (sourceEl) {
                 d = sourceEl.cloneNode(true);
                 d.id = Ext.id();
@@ -213,7 +215,7 @@ function initializePatientDragZone(v) {
                     repairXY: Ext.fly(sourceEl).getXY(),
                     ddel: d,
                     patientData: v.getRecord(sourceEl).data
-                }
+                };
             }
         },
 
@@ -242,8 +244,11 @@ function initializePatientDragZone(v) {
  *
  * We provide implementations of each of these to provide behaviour for these events.
  */
-function initializeHospitalDropZone(g) {
-    g.dropZone = new Ext.dd.DropZone(g.getView().scroller, {
+function initializeHospitalDropZone(v) {
+    var gridView = v,
+        grid = gridView.up('gridpanel');
+
+    grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
 
 //      If the mouse is over a target node, return that node. This is
 //      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
@@ -252,18 +257,18 @@ function initializeHospitalDropZone(g) {
         },
 
 //      On entry into a target node, highlight that node.
-        onNodeEnter : function(target, dd, e, data){ 
-            Ext.fly(target).addClass('hospital-target-hover');
+        onNodeEnter : function(target, dd, e, data){
+            Ext.fly(target).addCls('hospital-target-hover');
         },
 
 //      On exit from a target node, unhighlight that node.
-        onNodeOut : function(target, dd, e, data){ 
-            Ext.fly(target).removeClass('hospital-target-hover');
+        onNodeOut : function(target, dd, e, data){
+            Ext.fly(target).removeCls('hospital-target-hover');
         },
 
 //      While over a target node, return the default drop allowed class which
 //      places a "tick" icon into the drag proxy.
-        onNodeOver : function(target, dd, e, data){ 
+        onNodeOver : function(target, dd, e, data){
             return Ext.dd.DropZone.prototype.dropAllowed;
         },
 
@@ -273,13 +278,15 @@ function initializeHospitalDropZone(g) {
 //      We can use the data set up by the DragZone's getDragData method to read
 //      any data we decided to attach.
         onNodeDrop : function(target, dd, e, data){
-            var rowIndex = g.getView().findRowIndex(target);
-            var h = g.getStore().getAt(rowIndex);
-            var targetEl = Ext.get(target);
-            targetEl.update(data.patientData.name+', '+targetEl.dom.innerHTML);
+            var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
+                mainRow = rowBody.previousSibling,
+                h = gridView.getRecord(mainRow),
+                targetEl = Ext.get(target);
+
+            targetEl.update(data.patientData.name + ', ' + targetEl.dom.innerHTML);
             Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
                 ' on hospital ' + h.data.name);
             return true;
         }
     });
-}
\ No newline at end of file
+}