examples/dd/dnd_grid_to_formpanel.js

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