examples/dd/dnd_grid_to_grid.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 : "Rec 0", column1 : "0", column2 : "0" },\r
  22                         { name : "Rec 1", column1 : "1", column2 : "1" },\r
  23                         { name : "Rec 2", column1 : "2", column2 : "2" },\r
  24                         { name : "Rec 3", column1 : "3", column2 : "3" },\r
  25                         { name : "Rec 4", column1 : "4", column2 : "4" },\r
  26                         { name : "Rec 5", column1 : "5", column2 : "5" },\r
  27                         { name : "Rec 6", column1 : "6", column2 : "6" },\r
  28                         { name : "Rec 7", column1 : "7", column2 : "7" },\r
  29                         { name : "Rec 8", column1 : "8", column2 : "8" },\r
  30                         { name : "Rec 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 firstGridStore = 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 firstGrid = new Ext.grid.GridPanel({\r
  59                 ddGroup          : 'secondGridDDGroup',\r
  60         store            : firstGridStore,\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            : 'First Grid'\r
  68     });\r
  69 \r
  70     var secondGridStore = new Ext.data.JsonStore({\r
  71         fields : fields,\r
  72                 root   : 'records'\r
  73     });\r
  74         \r
  75     // create the destination Grid\r
  76     var secondGrid = new Ext.grid.GridPanel({\r
  77                 ddGroup          : 'firstGridDDGroup',\r
  78         store            : secondGridStore,\r
  79         columns          : cols,\r
  80                 enableDragDrop   : true,\r
  81         stripeRows       : true,\r
  82         autoExpandColumn : 'name',\r
  83         width            : 325,\r
  84                 region           : 'center',\r
  85         title            : 'Second Grid'\r
  86     });\r
  87 \r
  88         \r
  89         //Simple 'border layout' panel to house both grids\r
  90         var displayPanel = new Ext.Panel({\r
  91                 width    : 650,\r
  92                 height   : 300,\r
  93                 layout   : 'border',\r
  94                 renderTo : 'panel',\r
  95                 items    : [\r
  96                         firstGrid,\r
  97                         secondGrid\r
  98                 ],\r
  99                 bbar    : [\r
 100                         '->', // Fill\r
 101                         {\r
 102                                 text    : 'Reset both grids',\r
 103                                 handler : function() {\r
 104                                         //refresh source grid\r
 105                                         firstGridStore.loadData(myData);\r
 106                                         \r
 107                                         //purge destination grid\r
 108                                         secondGridStore.removeAll();\r
 109                                 }\r
 110                         }\r
 111                 ]\r
 112         });\r
 113 \r
 114         // used to add records to the destination stores\r
 115         var blankRecord =  Ext.data.Record.create(fields);\r
 116 \r
 117         /****\r
 118         * Setup Drop Targets\r
 119         ***/\r
 120         // This will make sure we only drop to the view container\r
 121         var firstGridDropTargetEl =  firstGrid.getView().el.dom.childNodes[0].childNodes[1];\r
 122         var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {\r
 123                 ddGroup    : 'firstGridDDGroup',\r
 124                 copy       : true,\r
 125                 notifyDrop : function(ddSource, e, data){\r
 126                         \r
 127                         // Generic function to add records.\r
 128                         function addRow(record, index, allItems) {\r
 129                                 \r
 130                                 // Search for duplicates\r
 131                                 var foundItem = firstGridStore.find('name', record.data.name);\r
 132                                 // if not found\r
 133                                 if (foundItem  == -1) {\r
 134                                         firstGridStore.add(record);\r
 135                                         \r
 136                                         // Call a sort dynamically\r
 137                                         firstGridStore.sort('name', 'ASC');\r
 138                                         \r
 139                                         //Remove Record from the source\r
 140                                         ddSource.grid.store.remove(record);\r
 141                                 }\r
 142                         }\r
 143 \r
 144                         // Loop through the selections\r
 145                         Ext.each(ddSource.dragData.selections ,addRow);\r
 146                         return(true);\r
 147                 }\r
 148         });     \r
 149 \r
 150         \r
 151         // This will make sure we only drop to the view container\r
 152         var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]\r
 153         \r
 154         var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {\r
 155                 ddGroup    : 'secondGridDDGroup',\r
 156                 copy       : false,\r
 157                 notifyDrop : function(ddSource, e, data){\r
 158                         \r
 159                         // Generic function to add records.\r
 160                         function addRow(record, index, allItems) {\r
 161                                 \r
 162                                 // Search for duplicates\r
 163                                 var foundItem = secondGridStore.find('name', record.data.name);\r
 164                                 // if not found\r
 165                                 if (foundItem  == -1) {\r
 166                                         secondGridStore.add(record);\r
 167                                         // Call a sort dynamically\r
 168                                         secondGridStore.sort('name', 'ASC');\r
 169                         \r
 170                                         //Remove Record from the source\r
 171                                         ddSource.grid.store.remove(record);\r
 172                                 }\r
 173                         }\r
 174                         // Loop through the selections\r
 175                         Ext.each(ddSource.dragData.selections ,addRow);\r
 176                         return(true);\r
 177                 }\r
 178         }); \r
 179 });\r