Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / dd / dragdropzones.js
index e724b18..0541ee3 100644 (file)
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-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: '616 555 222'\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
+/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+Ext.onReady(function() {
+
+    var patients = [{
+        insuranceCode: '11111',
+        name: 'Fred Bloggs',
+        address: 'Main Street',
+        telephone: '555 1234 123'
+    }, {
+        insuranceCode: '22222',
+        name: 'Fred West',
+        address: 'Cromwell Street',
+        telephone: '666 666 666'
+    }, {
+        insuranceCode: '33333',
+        name: 'Fred Mercury',
+        address: 'Over The Rainbow',
+        telephone: '555 321 0987'
+    }, {
+        insuranceCode: '44444',
+        name: 'Fred Forsyth',
+        address: 'Blimp Street',
+        telephone: '555 111 2222'
+    }, {
+        insuranceCode: '55555',
+        name: 'Fred Douglass',
+        address: 'Talbot County, Maryland',
+        telephone: 'N/A'
+    }];
+
+    var PatientRecord = Ext.data.Record.create([{
+        name: 'name'
+    }, {
+        name: 'address'
+    }, {
+        name: 'telephone'
+    }]);
+
+    var patientStore = new Ext.data.Store({
+        data: patients,
+        reader: new Ext.data.JsonReader({
+            id: 'insuranceCode'
+        }, PatientRecord)
+    });
+
+    var hospitals = [{
+        code: 'AAAAA',
+        name: 'Saint Thomas',
+        address: 'Westminster Bridge Road, SE1 7EH',
+        telephone: '020 7188 7188'
+    }, {
+        code: 'BBBBB',
+        name: 'Queen\'s Medical Centre',
+        address: 'Derby Road, NG7 2UH',
+        telephone: '0115 924 9924'
+    }, {
+        code: 'CCCCC',
+        name: 'Saint Bartholomew',
+        address: 'West Smithfield, EC1A 7BE',
+        telephone: '020 7377 7000'
+    }, {
+        code: 'DDDDD',
+        name: 'Royal London',
+        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)
+    });
+    
+    var patientView = new Ext.DataView({
+        cls: 'patient-view',
+        tpl: '<tpl for=".">' +
+                '<div class="patient-source"><table><tbody>' +
+                    '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +
+                    '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +
+                    '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +
+                '</tbody></table></div>' +
+             '</tpl>',
+        itemSelector: 'div.patient-source',
+        overClass: 'patient-over',
+        selectedClass: 'patient-selected',
+        singleSelect: true,
+        store: patientStore,
+        listeners: {
+            render: initializePatientDragZone
+        }
+    });
+
+    var helpWindow = new Ext.Window({
+        title: 'Source code',
+        width: 920,
+        height: 500,
+        closeAction: 'hide',
+        bodyCfg: {tag: 'textarea', readonly: true},
+        bodyStyle: {
+            backgroundColor: 'white',
+            margin: '0px',
+            border: '0px none'
+        },
+        listeners: {
+            render: function(w) {
+                Ext.Ajax.request({
+                    url: 'dragdropzones.js',
+                    success: function(r) {
+                        w.body.dom.value = r.responseText;
+                    }
+                });
+            }
+        }
+    });
+
+    var hospitalGrid = new Ext.grid.GridPanel({
+        title: 'Hospitals',
+        region: 'center',
+        margins: '0 5 5 0',
+        bbar: [{
+            text: 'View Source',
+            handler: function() {
+                helpWindow.show();
+            }
+        }],
+        columns: [{
+            dataIndex: 'name',
+            header: 'Name',
+            width: 200
+        }, {
+            dataIndex: 'address',
+            header: 'Address',
+            width: 300
+        }, {
+            dataIndex: 'telephone',
+            header: 'Telephone',
+            width: 100
+        }],
+        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);
+            }
+        },
+        store: hospitalStore,
+        listeners: {
+            render: initializeHospitalDropZone
+        }
+    });
+
+    new Ext.Viewport({
+        layout: 'border',
+        items: [{
+            cls: 'app-header',
+            region: 'north',
+            height: 30,
+            html: '<h1>Patient Hospital Assignment</h1>',
+            margins: '5 5 5 5'
+        }, {
+            title: 'Patients',
+            region: 'west',
+            width: 300,
+            margins: '0 5 5 5',
+            items: patientView
+        }, hospitalGrid ]
+    });
+});
+
+/*
+ * Here is where we "activate" the DataView.
+ * We have decided that each node with the class "patient-source" encapsulates a single draggable
+ * object.
+ *
+ * So we inject code into the DragZone which, when passed a mousedown event, interrogates
+ * the event to see if it was within an element with the class "patient-source". If so, we
+ * return non-null drag data.
+ *
+ * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
+ * The data must contain a property called "ddel" which is a DOM element which provides an image
+ * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
+ * We can insert any other data into the data object, and this will be used by a cooperating DropZone
+ * to perform the drop operation.
+ */
+function initializePatientDragZone(v) {
+    v.dragZone = new 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);
+            if (sourceEl) {
+                d = sourceEl.cloneNode(true);
+                d.id = Ext.id();
+                return v.dragData = {
+                    sourceEl: sourceEl,
+                    repairXY: Ext.fly(sourceEl).getXY(),
+                    ddel: d,
+                    patientData: v.getRecord(sourceEl).data
+                }
+            }
+        },
+
+//      Provide coordinates for the proxy to slide back to on failed drag.
+//      This is the original XY coordinates of the draggable element.
+        getRepairXY: function() {
+            return this.dragData.repairXY;
+        }
+    });
+}
+
+/*
+ * Here is where we "activate" the GridPanel.
+ * We have decided that the element with class "hospital-target" is the element which can receieve
+ * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
+ * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
+ * the mouse if over an element which can receieve drop gestures.
+ *
+ * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
+ * call several "onNodeXXXX" methods at various points. These include:
+ *
+ * onNodeEnter
+ * onNodeOut
+ * onNodeOver
+ * onNodeDrop
+ *
+ * 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, {
+
+//      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
+        getTargetFromEvent: function(e) {
+            return e.getTarget('.hospital-target');
+        },
+
+//      On entry into a target node, highlight that node.
+        onNodeEnter : function(target, dd, e, data){ 
+            Ext.fly(target).addClass('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');
+        },
+
+//      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){ 
+            return Ext.dd.DropZone.prototype.dropAllowed;
+        },
+
+//      On node drop, we can interrogate the target node to find the underlying
+//      application object that is the real target of the dragged data.
+//      In this case, it is a Record in the GridPanel's Store.
+//      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);
+            Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
+                ' on hospital ' + h.data.name);
+            return true;
+        }
+    });
 }
\ No newline at end of file