Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / examples / dd / field-to-grid-dd.js
index 933bc52..ebe62a6 100644 (file)
-/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-// A DropZone which cooperates with DragZones whose dragData contains\r
-// a "field" property representing a form Field. Fields may be dropped onto\r
-// grid data cells containing a matching data type.\r
-Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, {\r
-    constructor: function(){},\r
-\r
-//  Call the DropZone constructor using the View's scrolling element\r
-//  only after the grid has been rendered.\r
-    init: function(grid) {\r
-        if (grid.rendered) {\r
-            this.grid = grid;\r
-            this.view = grid.getView();\r
-            this.store = grid.getStore();\r
-            Ext.ux.CellFieldDropZone.superclass.constructor.call(this, this.view.scroller);\r
-        } else {\r
-            grid.on('render', this.init, this);\r
-        }\r
-    },\r
-\r
-//  Scroll the main configured Element when we drag close to the edge\r
-    containerScroll: true,\r
-\r
-    getTargetFromEvent: function(e) {\r
-//      Ascertain whether the mousemove is within a grid cell\r
-        var t = e.getTarget(this.view.cellSelector);\r
-        if (t) {\r
-\r
-//          We *are* within a grid cell, so ask the View exactly which one,\r
-//          Extract data from the Model to create a target object for\r
-//          processing in subsequent onNodeXXXX methods. Note that the target does\r
-//          not have to be a DOM element. It can be whatever the noNodeXXX methods are\r
-//          programmed to expect.\r
-            var rowIndex = this.view.findRowIndex(t);\r
-            var columnIndex = this.view.findCellIndex(t);\r
-            if ((rowIndex !== false) && (columnIndex !== false)) {\r
-                return {\r
-                    node: t,\r
-                    record: this.store.getAt(rowIndex),\r
-                    fieldName: this.grid.getColumnModel().getDataIndex(columnIndex)\r
-                };\r
-            }\r
-        }\r
-    },\r
-\r
-//  On Node enter, see if it is valid for us to drop the field on that type of column.\r
-    onNodeEnter: function(target, dd, e, dragData) {\r
-        delete this.dropOK;\r
-        if (!target) {\r
-            return;\r
-        }\r
-\r
-//      Check that a field is being dragged.\r
-        var f = dragData.field;\r
-        if (!f) {\r
-            return;\r
-        }\r
-\r
-//      Check whether the data type of the column being dropped on accepts the\r
-//      dragged field type. If so, set dropOK flag, and highlight the target node.\r
-        var type = target.record.fields.get(target.fieldName).type;\r
-        switch (type) {\r
-            case 'float':\r
-            case 'int':\r
-                if (!f.isXType('numberfield')) {\r
-                    return;\r
-                }\r
-                break;\r
-            case 'date':\r
-                if (!f.isXType('datefield')) {\r
-                    return;\r
-                }\r
-                break;\r
-            case 'boolean':\r
-                if (!f.isXType('checkbox')) {\r
-                    return;\r
-                }\r
-        }\r
-        this.dropOK = true;\r
-        Ext.fly(target.node).addClass('x-drop-target-active');\r
-    },\r
-\r
-//  Return the class name to add to the drag proxy. This provides a visual indication\r
-//  of drop allowed or not allowed.\r
-    onNodeOver: function(target, dd, e, dragData) {\r
-        return this.dropOK ? this.dropAllowed : this.dropNotAllowed;\r
-    },\r
-\r
-//   nhighlight the target node.\r
-    onNodeOut: function(target, dd, e, dragData) {\r
-        Ext.fly(target.node).removeClass('x-drop-target-active');\r
-    },\r
-\r
-//  Process the drop event if we have previously ascertained that a drop is OK.\r
-    onNodeDrop: function(target, dd, e, dragData) {\r
-        if (this.dropOK) {\r
-            target.record.set(target.fieldName, dragData.field.getValue());\r
-            return true;\r
-        }\r
-    }\r
-});\r
-\r
-//  A class which makes Fields within a Panel draggable.\r
-//  the dragData delivered to a coooperating DropZone's methods contains\r
-//  the dragged Field in the property "field".\r
-Ext.ux.PanelFieldDragZone = Ext.extend(Ext.dd.DragZone, {\r
-    constructor: function(){},\r
-\r
-//  Call the DRagZone's constructor. The Panel must have been rendered.\r
-    init: function(panel) {\r
-        if (panel.nodeType) {\r
-            Ext.ux.PanelFieldDragZone.superclass.init.apply(this, arguments);\r
-        } else {\r
-            if (panel.rendered) {\r
-                Ext.ux.PanelFieldDragZone.superclass.constructor.call(this, panel.getEl());\r
-                var i = Ext.fly(panel.getEl()).select('input');\r
-                i.unselectable();\r
-            } else {\r
-                panel.on('afterlayout', this.init, this, {single: true});\r
-            }\r
-        }\r
-    },\r
-\r
-    scroll: false,\r
-\r
-//  On mousedown, we ascertain whether it is on one of our draggable Fields.\r
-//  If so, we collect data about the draggable object, and return a drag data\r
-//  object which contains our own data, plus a "ddel" property which is a DOM\r
-//  node which provides a "view" of the dragged data.\r
-    getDragData: function(e) {\r
-        var t = e.getTarget('input');\r
-        if (t) {\r
-            e.stopEvent();\r
-\r
-//          Ugly code to "detach" the drag gesture from the input field.\r
-//          Without this, Opera never changes the mouseover target from the input field\r
-//          even when dragging outside of the field - it just keeps selecting.\r
-            if (Ext.isOpera) {\r
-                Ext.fly(t).on('mousemove', function(e1){\r
-                    t.style.visibility = 'hidden';\r
-                    (function(){\r
-                        t.style.visibility = '';\r
-                    }).defer(1);\r
-                }, null, {single:true});\r
-            }\r
-\r
-//          Get the data we are dragging: the Field\r
-//          create a ddel for the drag proxy to display\r
-            var f = Ext.getCmp(t.id);\r
-            var d = document.createElement('div');\r
-            d.className = 'x-form-text';\r
-            d.appendChild(document.createTextNode(t.value));\r
-            Ext.fly(d).setWidth(f.getEl().getWidth());\r
-            return {\r
-                field: f,\r
-                ddel: d\r
-            };\r
-        }\r
-    },\r
-\r
-//  The coordinates to slide the drag proxy back to on failed drop.\r
-    getRepairXY: function() {\r
-        return this.dragData.field.getEl().getXY();\r
-    }\r
-});\r
-\r
-Ext.onReady(function(){\r
-\r
-    var myData = [\r
-        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],\r
-        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],\r
-        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],\r
-        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],\r
-        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],\r
-        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],\r
-        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],\r
-        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],\r
-        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],\r
-        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],\r
-        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],\r
-        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],\r
-        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],\r
-        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],\r
-        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],\r
-        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],\r
-        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],\r
-        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],\r
-        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],\r
-        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],\r
-        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],\r
-        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],\r
-        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],\r
-        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],\r
-        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],\r
-        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],\r
-        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],\r
-        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],\r
-        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']\r
-    ];\r
-\r
-    // example of custom renderer function\r
-    function change(val){\r
-        if(val > 0){\r
-            return '<span style="color:green;">' + val + '</span>';\r
-        }else if(val < 0){\r
-            return '<span style="color:red;">' + val + '</span>';\r
-        }\r
-        return val;\r
-    }\r
-\r
-    // example of custom renderer function\r
-    function pctChange(val){\r
-        if(val > 0){\r
-            return '<span style="color:green;">' + val + '%</span>';\r
-        }else if(val < 0){\r
-            return '<span style="color:red;">' + val + '%</span>';\r
-        }\r
-        return val;\r
-    }\r
-\r
-    // create the data store\r
-    var store = new Ext.data.ArrayStore({\r
-        fields: [\r
-           {name: 'company'},\r
-           {name: 'price', type: 'float'},\r
-           {name: 'change', type: 'float'},\r
-           {name: 'pctChange', type: 'float'},\r
-           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}\r
-        ]\r
-    });\r
-    store.loadData(myData);\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: 'field-to-grid-dd.js',\r
-                    success: function(r) {\r
-                        w.body.dom.value = r.responseText;\r
-                    }\r
-                });\r
-            }\r
-        }\r
-    });\r
-\r
-    // create the Grid\r
-    var grid = new Ext.grid.GridPanel({\r
-        store: store,\r
-        columns: [\r
-            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},\r
-            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},\r
-            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},\r
-            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},\r
-            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
-        ],\r
-        plugins: new Ext.ux.CellFieldDropZone(),\r
-        stripeRows: true,\r
-        autoExpandColumn: 'company',\r
-        height:350,\r
-        width:600,\r
-        title:'Array Grid',\r
-        bbar: new Ext.PagingToolbar({\r
-            buttons: [{\r
-                text: 'View Source',\r
-                handler: function() {\r
-                    helpWindow.show();\r
-                }\r
-            }],\r
-            store: store,\r
-            pageSize: 25\r
-        })\r
-    });\r
-\r
-    grid.render('grid-example');\r
-    grid.getSelectionModel().selectFirstRow();\r
-\r
-    var f = new Ext.Panel({\r
-        frame: true,\r
-        layout: 'form',\r
-        width: 600,\r
-        plugins: new Ext.ux.PanelFieldDragZone(),\r
-        style: {\r
-            'margin-top': '10px'\r
-        },\r
-        labelWidth: 150,\r
-        items: [{\r
-            xtype: 'textfield',\r
-            fieldLabel: 'Drag this text',\r
-            value: 'test'\r
-        },{\r
-            xtype: 'numberfield',\r
-            fieldLabel: 'Drag this number',\r
-            value: '1.2'\r
-        },{\r
-            xtype: 'datefield',\r
-            fieldLabel: 'Drag this date',\r
-            value: new Date()\r
-        }],\r
-        renderTo: Ext.getBody()\r
-    });\r
-});
\ No newline at end of file
+/*
+
+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(['*']);
+
+// A DropZone which cooperates with DragZones whose dragData contains
+// a "field" property representing a form Field. Fields may be dropped onto
+// grid data cells containing a matching data type.
+Ext.define('Ext.ux.CellFieldDropZone', {
+    extend: 'Ext.dd.DropZone',
+
+    constructor: function(){},
+
+//  Call the DropZone constructor using the View's scrolling element
+//  only after the grid has been rendered.
+    init: function(grid) {
+        var me = this;
+
+        if (grid.rendered) {
+            me.grid = grid;
+            grid.getView().on({
+                render: function(v) {
+                    me.view = v;
+                    Ext.ux.CellFieldDropZone.superclass.constructor.call(me, me.view.el);
+                },
+                single: true
+            });
+        } else {
+            grid.on('render', me.init, me, {single: true});
+        }
+    },
+
+//  Scroll the main configured Element when we drag close to the edge
+    containerScroll: true,
+
+    getTargetFromEvent: function(e) {
+        var me = this,
+            v = me.view;
+
+//      Ascertain whether the mousemove is within a grid cell
+        var cell = e.getTarget(v.cellSelector);
+        if (cell) {
+
+//          We *are* within a grid cell, so ask the View exactly which one,
+//          Extract data from the Model to create a target object for
+//          processing in subsequent onNodeXXXX methods. Note that the target does
+//          not have to be a DOM element. It can be whatever the noNodeXXX methods are
+//          programmed to expect.
+            var row = v.findItemByChild(cell),
+                columnIndex = cell.cellIndex;
+
+            if (row && Ext.isDefined(columnIndex)) {
+                return {
+                    node: cell,
+                    record: v.getRecord(row),
+                    fieldName: me.grid.columns[columnIndex].dataIndex
+                };
+            }
+        }
+    },
+
+//  On Node enter, see if it is valid for us to drop the field on that type of column.
+    onNodeEnter: function(target, dd, e, dragData) {
+        delete this.dropOK;
+        if (!target) {
+            return;
+        }
+
+//      Check that a field is being dragged.
+        var f = dragData.field;
+        if (!f) {
+            return;
+        }
+
+//      Check whether the data type of the column being dropped on accepts the
+//      dragged field type. If so, set dropOK flag, and highlight the target node.
+        var type = target.record.fields.get(target.fieldName).type,
+            types = Ext.data.Types;
+        switch(type){
+            case types.FLOAT:
+            case types.INT:
+                if (!f.isXType('numberfield')) {
+                    return;
+                }
+                break;
+            case types.DATE:
+                if (!f.isXType('datefield')) {
+                    return;
+                }
+                break;
+            case types.BOOL:
+                if (!f.isXType('checkbox')) {
+                    return;
+                }
+        }
+        this.dropOK = true;
+        Ext.fly(target.node).addCls('x-drop-target-active');
+    },
+
+//  Return the class name to add to the drag proxy. This provides a visual indication
+//  of drop allowed or not allowed.
+    onNodeOver: function(target, dd, e, dragData) {
+        return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
+    },
+
+//  highlight the target node.
+    onNodeOut: function(target, dd, e, dragData) {
+        Ext.fly(target.node).removeCls('x-drop-target-active');
+    },
+
+//  Process the drop event if we have previously ascertained that a drop is OK.
+    onNodeDrop: function(target, dd, e, dragData) {
+        if (this.dropOK) {
+            target.record.set(target.fieldName, dragData.field.getValue());
+            return true;
+        }
+    }
+});
+
+//  A class which makes Fields within a Panel draggable.
+//  the dragData delivered to a cooperating DropZone's methods contains
+//  the dragged Field in the property "field".
+Ext.define('Ext.ux.PanelFieldDragZone', {
+
+    extend: 'Ext.dd.DragZone',
+
+    constructor: function(){},
+
+//  Call the DRagZone's constructor. The Panel must have been rendered.
+    init: function(panel) {
+        if (panel.nodeType) {
+            Ext.ux.PanelFieldDragZone.superclass.init.apply(this, arguments);
+        } else {
+            if (panel.rendered) {
+                Ext.ux.PanelFieldDragZone.superclass.constructor.call(this, panel.getEl());
+                var i = Ext.fly(panel.getEl()).select('input');
+                i.unselectable();
+            } else {
+                panel.on('afterlayout', this.init, this, {single: true});
+            }
+        }
+    },
+
+    scroll: false,
+
+//  On mousedown, we ascertain whether it is on one of our draggable Fields.
+//  If so, we collect data about the draggable object, and return a drag data
+//  object which contains our own data, plus a "ddel" property which is a DOM
+//  node which provides a "view" of the dragged data.
+    getDragData: function(e) {
+        var t = e.getTarget('input');
+        if (t) {
+            e.stopEvent();
+
+//          Ugly code to "detach" the drag gesture from the input field.
+//          Without this, Opera never changes the mouseover target from the input field
+//          even when dragging outside of the field - it just keeps selecting.
+            if (Ext.isOpera) {
+                Ext.fly(t).on('mousemove', function(e1){
+                    t.style.visibility = 'hidden';
+                    Ext.defer(function(){
+                        t.style.visibility = '';
+                    }, 1);
+                }, null, {single:true});
+            }
+
+//          Get the data we are dragging: the Field
+//          create a ddel for the drag proxy to display
+            var f = Ext.ComponentQuery.query('field[inputEl]{inputEl.id=="' + t.id + '"}')[0];
+            var d = document.createElement('div');
+            d.className = 'x-form-text';
+            d.appendChild(document.createTextNode(t.value));
+            Ext.fly(d).setWidth(f.getEl().getWidth());
+            return {
+                field: f,
+                ddel: d
+            };
+        }
+    },
+
+//  The coordinates to slide the drag proxy back to on failed drop.
+    getRepairXY: function() {
+        return this.dragData.field.getEl().getXY();
+    }
+});
+
+Ext.onReady(function(){
+
+    var myData = [
+        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
+        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
+        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
+        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
+        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
+        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
+        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
+        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
+        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
+        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
+        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
+        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
+        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
+        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
+        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
+        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
+        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
+        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
+        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
+        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
+        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
+        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
+        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
+        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
+        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
+        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
+        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
+        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
+        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
+    ];
+
+    // example of custom renderer function
+    function change(val){
+        if(val > 0){
+            return '<span style="color:green;">' + val + '</span>';
+        }else if(val < 0){
+            return '<span style="color:red;">' + val + '</span>';
+        }
+        return val;
+    }
+
+    // example of custom renderer function
+    function pctChange(val){
+        if(val > 0){
+            return '<span style="color:green;">' + val + '%</span>';
+        }else if(val < 0){
+            return '<span style="color:red;">' + val + '%</span>';
+        }
+        return val;
+    }
+
+    // create the data store
+    var store = Ext.create('Ext.data.ArrayStore', {
+        fields: [
+           {name: 'company'},
+           {name: 'price', type: 'float'},
+           {name: 'change', type: 'float'},
+           {name: 'pctChange', type: 'float'},
+           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
+        ],
+        data: myData
+    });
+
+    var helpWindow = Ext.create('Ext.Window', {
+        title: 'Source code',
+        width: 920,
+        height: 500,
+        closeAction: 'hide',
+        layout: 'fit',
+        items: {
+            hideLabel: true,
+            xtype: 'textarea',
+            readOnly: true
+        },
+        listeners: {
+            render: function(w) {
+                Ext.Ajax.request({
+                    url: 'field-to-grid-dd.js',
+                    success: function(r) {
+                        w.items.first().setValue(r.responseText);
+                    }
+                });
+            }
+        }
+    });
+
+    // create the Grid
+    var grid = Ext.create('Ext.grid.Panel', {
+        store: store,
+        columns: [
+            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
+            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
+            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
+            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
+            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
+        ],
+        plugins: Ext.create('Ext.ux.CellFieldDropZone'),
+        stripeRows: true,
+        autoExpandColumn: 'company',
+        height:350,
+        width:600,
+        title:'Array Grid',
+        dockedItems: [{
+            dock: 'bottom',
+            xtype: 'toolbar',
+            items: {
+                text: 'View Source',
+                handler: function() {
+                    helpWindow.show();
+                }
+            }
+        }]
+    });
+
+    grid.render('grid-example');
+
+    var f = Ext.create('Ext.Panel', {
+        frame: true,
+        width: 600,
+        plugins: Ext.create('Ext.ux.PanelFieldDragZone'),
+        labelWidth: 150,
+        items: [{
+            xtype: 'textfield',
+            fieldLabel: 'Drag this text',
+            value: 'test'
+        },{
+            xtype: 'numberfield',
+            fieldLabel: 'Drag this number',
+            value: '1.2'
+        },{
+            xtype: 'datefield',
+            fieldLabel: 'Drag this date',
+            value: new Date()
+        }],
+        renderTo: Ext.getBody()
+    });
+});
+