examples/dd/dnd_grid_to_formpanel.js

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