docs/source/dnd_grid_to_formpanel.html

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