examples/dd/dnd_grid_to_grid.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     var myData = {
  10                 records : [
  11                         { name : "Rec 0", column1 : "0", column2 : "0" },
  12                         { name : "Rec 1", column1 : "1", column2 : "1" },
  13                         { name : "Rec 2", column1 : "2", column2 : "2" },
  14                         { name : "Rec 3", column1 : "3", column2 : "3" },
  15                         { name : "Rec 4", column1 : "4", column2 : "4" },
  16                         { name : "Rec 5", column1 : "5", column2 : "5" },
  17                         { name : "Rec 6", column1 : "6", column2 : "6" },
  18                         { name : "Rec 7", column1 : "7", column2 : "7" },
  19                         { name : "Rec 8", column1 : "8", column2 : "8" },
  20                         { name : "Rec 9", column1 : "9", column2 : "9" }
  21                 ]
  22         };
  23
  24
  25         // Generic fields array to use in both store defs.
  26         var fields = [
  27                 {name: 'name', mapping : 'name'},
  28                 {name: 'column1', mapping : 'column1'},
  29                 {name: 'column2', mapping : 'column2'}
  30         ];
  31
  32     // create the data store
  33     var firstGridStore = new Ext.data.JsonStore({
  34                 fields : fields,
  35                 data   : myData,
  36                 root   : 'records'
  37     });
  38
  39
  40         // Column Model shortcut array
  41         var cols = [
  42                 { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
  43                 {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
  44                 {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
  45         ];
  46
  47         // declare the source Grid
  48     var firstGrid = new Ext.grid.GridPanel({
  49         ddGroup          : 'secondGridDDGroup',
  50         store            : firstGridStore,
  51         columns          : cols,
  52         enableDragDrop   : true,
  53         stripeRows       : true,
  54         autoExpandColumn : 'name',
  55         title            : 'First Grid'
  56     });
  57
  58     var secondGridStore = new Ext.data.JsonStore({
  59         fields : fields,
  60                 root   : 'records'
  61     });
  62
  63     // create the destination Grid
  64     var secondGrid = new Ext.grid.GridPanel({
  65         ddGroup          : 'firstGridDDGroup',
  66         store            : secondGridStore,
  67         columns          : cols,
  68         enableDragDrop   : true,
  69         stripeRows       : true,
  70         autoExpandColumn : 'name',
  71         title            : 'Second Grid'
  72     });
  73
  74
  75         //Simple 'border layout' panel to house both grids
  76         var displayPanel = new Ext.Panel({
  77                 width        : 650,
  78                 height       : 300,
  79                 layout       : 'hbox',
  80                 renderTo     : 'panel',
  81                 defaults     : { flex : 1 }, //auto stretch
  82                 layoutConfig : { align : 'stretch' },
  83                 items        : [
  84                         firstGrid,
  85                         secondGrid
  86                 ],
  87                 bbar    : [
  88                         '->', // Fill
  89                         {
  90                                 text    : 'Reset both grids',
  91                                 handler : function() {
  92                                         //refresh source grid
  93                                         firstGridStore.loadData(myData);
  94
  95                                         //purge destination grid
  96                                         secondGridStore.removeAll();
  97                                 }
  98                         }
  99                 ]
 100         });
 101
 102         // used to add records to the destination stores
 103         var blankRecord =  Ext.data.Record.create(fields);
 104
 105         /****
 106         * Setup Drop Targets
 107         ***/
 108         // This will make sure we only drop to the  view scroller element
 109         var firstGridDropTargetEl =  firstGrid.getView().scroller.dom;
 110         var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
 111                 ddGroup    : 'firstGridDDGroup',
 112                 notifyDrop : function(ddSource, e, data){
 113                         var records =  ddSource.dragData.selections;
 114                         Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
 115                         firstGrid.store.add(records);
 116                         firstGrid.store.sort('name', 'ASC');
 117                         return true
 118                 }
 119         });
 120
 121
 122         // This will make sure we only drop to the view scroller element
 123         var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
 124         var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
 125                 ddGroup    : 'secondGridDDGroup',
 126                 notifyDrop : function(ddSource, e, data){
 127                         var records =  ddSource.dragData.selections;
 128                         Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
 129                         secondGrid.store.add(records);
 130                         secondGrid.store.sort('name', 'ASC');
 131                         return true
 132                 }
 133         });
 134
 135 });