examples/dd/dnd_grid_to_formpanel.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 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.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require(['*']);
  16
  17 Ext.onReady(function(){
  18
  19     var myData = [
  20         { name : "Record 0", column1 : "0", column2 : "0" },
  21         { name : "Record 1", column1 : "1", column2 : "1" },
  22         { name : "Record 2", column1 : "2", column2 : "2" },
  23         { name : "Record 3", column1 : "3", column2 : "3" },
  24         { name : "Record 4", column1 : "4", column2 : "4" },
  25         { name : "Record 5", column1 : "5", column2 : "5" },
  26         { name : "Record 6", column1 : "6", column2 : "6" },
  27         { name : "Record 7", column1 : "7", column2 : "7" },
  28         { name : "Record 8", column1 : "8", column2 : "8" },
  29         { name : "Record 9", column1 : "9", column2 : "9" }
  30     ];
  31
  32     // Generic fields array to use in both store defs.
  33     Ext.define('DataObject', {
  34         extend: 'Ext.data.Model',
  35         fields: [
  36             {name: 'name', mapping : 'name'},
  37             {name: 'column1', mapping : 'column1'},
  38             {name: 'column2', mapping : 'column2'}
  39         ]
  40     });
  41
  42     // create the data store
  43     var gridStore = Ext.create('Ext.data.Store', {
  44         model  : 'DataObject',
  45         data   : myData
  46     });
  47
  48     // Column Model shortcut array
  49     var columns = [
  50         { id : 'name',      flex:  1,  header: "Record Name", sortable: true, dataIndex: 'name'},
  51         {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
  52         {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
  53     ];
  54
  55     // declare the source Grid
  56     var grid = Ext.create('Ext.grid.Panel', {
  57         viewConfig: {
  58             plugins: {
  59                 ddGroup: 'GridExample',
  60                 ptype: 'gridviewdragdrop',
  61                 enableDrop: false
  62             }
  63         },
  64         store            : gridStore,
  65         columns          : columns,
  66         enableDragDrop   : true,
  67         stripeRows       : true,
  68         width            : 325,
  69         margins          : '0 2 0 0',
  70         region           : 'west',
  71         title            : 'Data Grid',
  72         selModel         : Ext.create('Ext.selection.RowModel', {singleSelect : true})
  73     });
  74
  75     // Declare the text fields.  This could have been done inline, is easier to read
  76     // for folks learning :)
  77     var textField1 = Ext.create('Ext.form.field.Text', {
  78         fieldLabel : 'Record Name',
  79         name       : 'name'
  80     });
  81
  82     var textField2 = Ext.create('Ext.form.field.Text', {
  83         fieldLabel : 'Column 1',
  84         name       : 'column1'
  85     });
  86
  87     var textField3 = Ext.create('Ext.form.field.Text', {
  88         fieldLabel : 'Column 2',
  89         name       : 'column2'
  90     });
  91
  92     // Setup the form panel
  93     var formPanel = Ext.create('Ext.form.Panel', {
  94         region     : 'center',
  95         title      : 'Generic Form Panel',
  96         bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
  97         labelWidth : 100,
  98         width      : 325,
  99         margins    : '0 0 0 3',
 100         items      : [
 101             textField1,
 102             textField2,
 103             textField3
 104         ]
 105     });
 106
 107     //Simple 'border layout' panel to house both grids
 108     var displayPanel = Ext.create('Ext.Panel', {
 109         width    : 650,
 110         height   : 300,
 111         layout   : 'border',
 112         renderTo : 'panel',
 113         bodyPadding: '5',
 114         items    : [
 115             grid,
 116             formPanel
 117         ],
 118         bbar    : [
 119             '->', // Fill
 120             {
 121                 text    : 'Reset Example',
 122                 handler : function() {
 123                     //refresh source grid
 124                     gridStore.loadData(myData);
 125                     formPanel.getForm().reset();
 126                 }
 127             }
 128         ]
 129     });
 130
 131     /****
 132     * Setup Drop Targets
 133     ***/
 134
 135     // This will make sure we only drop to the view container
 136     var formPanelDropTargetEl =  formPanel.body.dom;
 137
 138     var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', formPanelDropTargetEl, {
 139         ddGroup: 'GridExample',
 140         notifyEnter: function(ddSource, e, data) {
 141
 142             //Add some flare to invite drop.
 143             formPanel.body.stopAnimation();
 144             formPanel.body.highlight();
 145         },
 146         notifyDrop  : function(ddSource, e, data){
 147
 148             // Reference the record (single selection) for readability
 149             var selectedRecord = ddSource.dragData.records[0];
 150
 151             // Load the record into the form
 152             formPanel.getForm().loadRecord(selectedRecord);
 153
 154             // Delete record from the source store.  not really required.
 155             ddSource.view.store.remove(selectedRecord);
 156
 157             return true;
 158         }
 159     });
 160 });
 161