docs/source/dnd_grid_to_grid.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(){\r
   9 \r
  10     var myData = {\r
  11                 records : [\r
  12                         { name : "Rec 0", column1 : "0", column2 : "0" },\r
  13                         { name : "Rec 1", column1 : "1", column2 : "1" },\r
  14                         { name : "Rec 2", column1 : "2", column2 : "2" },\r
  15                         { name : "Rec 3", column1 : "3", column2 : "3" },\r
  16                         { name : "Rec 4", column1 : "4", column2 : "4" },\r
  17                         { name : "Rec 5", column1 : "5", column2 : "5" },\r
  18                         { name : "Rec 6", column1 : "6", column2 : "6" },\r
  19                         { name : "Rec 7", column1 : "7", column2 : "7" },\r
  20                         { name : "Rec 8", column1 : "8", column2 : "8" },\r
  21                         { name : "Rec 9", column1 : "9", column2 : "9" }\r
  22                 ]\r
  23         };\r
  24 \r
  25 \r
  26         // Generic fields array to use in both store defs.\r
  27         var fields = [\r
  28            {name: 'name', mapping : 'name'},\r
  29            {name: 'column1', mapping : 'column1'},\r
  30            {name: 'column2', mapping : 'column2'}\r
  31         ];\r
  32 \r
  33     // create the data store\r
  34     var firstGridStore = new Ext.data.JsonStore({\r
  35         fields : fields,\r
  36                 data   : myData,\r
  37                 root   : 'records'\r
  38     });\r
  39 \r
  40 \r
  41         // Column Model shortcut array\r
  42         var cols = [\r
  43                 { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},\r
  44                 {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},\r
  45                 {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}\r
  46         ];\r
  47 \r
  48         // declare the source Grid\r
  49     var firstGrid = new Ext.grid.GridPanel({\r
  50         ddGroup          : 'secondGridDDGroup',\r
  51         store            : firstGridStore,\r
  52         columns          : cols,\r
  53         enableDragDrop   : true,\r
  54         stripeRows       : true,\r
  55         autoExpandColumn : 'name',\r
  56         width            : 325,\r
  57         region           : 'west',\r
  58         title            : 'First Grid'\r
  59     });\r
  60 \r
  61     var secondGridStore = new Ext.data.JsonStore({\r
  62         fields : fields,\r
  63                 root   : 'records'\r
  64     });\r
  65 \r
  66     // create the destination Grid\r
  67     var secondGrid = new Ext.grid.GridPanel({\r
  68         ddGroup          : 'firstGridDDGroup',\r
  69         store            : secondGridStore,\r
  70         columns          : cols,\r
  71         enableDragDrop   : true,\r
  72         stripeRows       : true,\r
  73         autoExpandColumn : 'name',\r
  74         width            : 325,\r
  75         region           : 'center',\r
  76         title            : 'Second Grid'\r
  77     });\r
  78 \r
  79 \r
  80         //Simple 'border layout' panel to house both grids\r
  81         var displayPanel = new Ext.Panel({\r
  82                 width    : 650,\r
  83                 height   : 300,\r
  84                 layout   : 'border',\r
  85                 renderTo : 'panel',\r
  86                 items    : [\r
  87                         firstGrid,\r
  88                         secondGrid\r
  89                 ],\r
  90                 bbar    : [\r
  91                         '->', // Fill\r
  92                         {\r
  93                                 text    : 'Reset both grids',\r
  94                                 handler : function() {\r
  95                                         //refresh source grid\r
  96                                         firstGridStore.loadData(myData);\r
  97 \r
  98                                         //purge destination grid\r
  99                                         secondGridStore.removeAll();\r
 100                                 }\r
 101                         }\r
 102                 ]\r
 103         });\r
 104 \r
 105         // used to add records to the destination stores\r
 106         var blankRecord =  Ext.data.Record.create(fields);\r
 107 \r
 108         <div id="prop-Ext.ux.TaskBar.TaskButton-This"></div>/****\r
 109         * Setup Drop Targets\r
 110         ***/\r
 111         // This will make sure we only drop to the view container\r
 112         var firstGridDropTargetEl =  firstGrid.getView().el.dom.childNodes[0].childNodes[1];\r
 113         var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {\r
 114                 ddGroup    : 'firstGridDDGroup',\r
 115                 copy       : true,\r
 116                 notifyDrop : function(ddSource, e, data){\r
 117 \r
 118                         // Generic function to add records.\r
 119                         function addRow(record, index, allItems) {\r
 120 \r
 121                                 // Search for duplicates\r
 122                                 var foundItem = firstGridStore.findExact('name', record.data.name);\r
 123                                 // if not found\r
 124                                 if (foundItem  == -1) {\r
 125                                         firstGridStore.add(record);\r
 126 \r
 127                                         // Call a sort dynamically\r
 128                                         firstGridStore.sort('name', 'ASC');\r
 129 \r
 130                                         //Remove Record from the source\r
 131                                         ddSource.grid.store.remove(record);\r
 132                                 }\r
 133                         }\r
 134 \r
 135                         // Loop through the selections\r
 136                         Ext.each(ddSource.dragData.selections ,addRow);\r
 137                         return(true);\r
 138                 }\r
 139         });\r
 140 \r
 141 \r
 142         // This will make sure we only drop to the view container\r
 143         var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]\r
 144 \r
 145         var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {\r
 146                 ddGroup    : 'secondGridDDGroup',\r
 147                 copy       : false,\r
 148                 notifyDrop : function(ddSource, e, data){\r
 149 \r
 150                         // Generic function to add records.\r
 151                         function addRow(record, index, allItems) {\r
 152 \r
 153                                 // Search for duplicates\r
 154                                 var foundItem = secondGridStore.findExact('name', record.data.name);\r
 155                                 // if not found\r
 156                                 if (foundItem  == -1) {\r
 157                                         secondGridStore.add(record);\r
 158                                         // Call a sort dynamically\r
 159                                         secondGridStore.sort('name', 'ASC');\r
 160 \r
 161                                         //Remove Record from the source\r
 162                                         ddSource.grid.store.remove(record);\r
 163                                 }\r
 164                         }\r
 165                         // Loop through the selections\r
 166                         Ext.each(ddSource.dragData.selections ,addRow);\r
 167                         return(true);\r
 168                 }\r
 169         });\r
 170 });\r
 171 </pre>    \r
 172 </body>\r
 173 </html>