examples/dd/dnd_grid_to_formpanel.js

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