X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/530ef4b6c5b943cfa68b779d11cf7de29aa878bf..6746dc89c47ed01b165cc1152533605f97eb8e8d:/examples/dd/dragdropzones.js

diff --git a/examples/dd/dragdropzones.js b/examples/dd/dragdropzones.js
index 8f0bb5a9..f320b7ce 100644
--- a/examples/dd/dragdropzones.js
+++ b/examples/dd/dragdropzones.js
@@ -1,9 +1,19 @@
-/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact:  http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
+Ext.require(['*']);
+
 Ext.onReady(function() {
 
     var patients = [{
@@ -13,8 +23,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 +43,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 +81,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 +109,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 +118,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 +138,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 +148,7 @@ Ext.onReady(function() {
                 helpWindow.show();
             }
         }],
+        sortableColumns: false,
         columns: [{
             dataIndex: 'name',
             header: 'Name',
@@ -150,20 +162,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 +213,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 +229,7 @@ function initializePatientDragZone(v) {
                     repairXY: Ext.fly(sourceEl).getXY(),
                     ddel: d,
                     patientData: v.getRecord(sourceEl).data
-                }
+                };
             }
         },
 
@@ -242,8 +258,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 +271,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 +292,16 @@ 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
+}
+