examples/dd/dnd_grid_to_grid.js

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