examples/dd/dnd_grid_to_grid.js

   1 Ext.require([
   2     'Ext.grid.*',
   3     'Ext.data.*',
   4     'Ext.dd.*'
   5 ]);
   6
   7 Ext.define('DataObject', {
   8     extend: 'Ext.data.Model',
   9     fields: ['name', 'column1', 'column2']
  10 });
  11
  12 Ext.onReady(function(){
  13
  14     var myData = [
  15         { name : "Rec 0", column1 : "0", column2 : "0" },
  16         { name : "Rec 1", column1 : "1", column2 : "1" },
  17         { name : "Rec 2", column1 : "2", column2 : "2" },
  18         { name : "Rec 3", column1 : "3", column2 : "3" },
  19         { name : "Rec 4", column1 : "4", column2 : "4" },
  20         { name : "Rec 5", column1 : "5", column2 : "5" },
  21         { name : "Rec 6", column1 : "6", column2 : "6" },
  22         { name : "Rec 7", column1 : "7", column2 : "7" },
  23         { name : "Rec 8", column1 : "8", column2 : "8" },
  24         { name : "Rec 9", column1 : "9", column2 : "9" }
  25     ];
  26
  27     // create the data store
  28     var firstGridStore = Ext.create('Ext.data.Store', {
  29         model: 'DataObject',
  30         data: myData
  31     });
  32
  33
  34     // Column Model shortcut array
  35     var columns = [
  36         {text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'},
  37         {text: "column1", width: 70, sortable: true, dataIndex: 'column1'},
  38         {text: "column2", width: 70, sortable: true, dataIndex: 'column2'}
  39     ];
  40
  41     // declare the source Grid
  42     var firstGrid = Ext.create('Ext.grid.Panel', {
  43         viewConfig: {
  44             plugins: {
  45                 ptype: 'gridviewdragdrop',
  46                 dragGroup: 'firstGridDDGroup',
  47                 dropGroup: 'secondGridDDGroup'
  48             },
  49             listeners: {
  50                 drop: function(node, data, dropRec, dropPosition) {
  51                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
  52                     Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
  53                 }
  54             }
  55         },
  56         store            : firstGridStore,
  57         columns          : columns,
  58         stripeRows       : true,
  59         title            : 'First Grid',
  60         margins          : '0 2 0 0'
  61     });
  62
  63     var secondGridStore = Ext.create('Ext.data.Store', {
  64         model: 'DataObject'
  65     });
  66
  67     // create the destination Grid
  68     var secondGrid = Ext.create('Ext.grid.Panel', {
  69         viewConfig: {
  70             plugins: {
  71                 ptype: 'gridviewdragdrop',
  72                 dragGroup: 'secondGridDDGroup',
  73                 dropGroup: 'firstGridDDGroup'
  74             },
  75             listeners: {
  76                 drop: function(node, data, dropRec, dropPosition) {
  77                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
  78                     Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
  79                 }
  80             }
  81         },
  82         store            : secondGridStore,
  83         columns          : columns,
  84         stripeRows       : true,
  85         title            : 'Second Grid',
  86         margins          : '0 0 0 3'
  87     });
  88
  89     //Simple 'border layout' panel to house both grids
  90     var displayPanel = Ext.create('Ext.Panel', {
  91         width        : 650,
  92         height       : 300,
  93         layout       : {
  94             type: 'hbox',
  95             align: 'stretch',
  96             padding: 5
  97         },
  98         renderTo     : 'panel',
  99         defaults     : { flex : 1 }, //auto stretch
 100         items        : [
 101             firstGrid,
 102             secondGrid
 103         ],
 104         dockedItems: {
 105             xtype: 'toolbar',
 106             dock: 'bottom',
 107             items: ['->', // Fill
 108             {
 109                 text: 'Reset both grids',
 110                 handler: function(){
 111                     //refresh source grid
 112                     firstGridStore.loadData(myData);
 113
 114                     //purge destination grid
 115                     secondGridStore.removeAll();
 116                 }
 117             }]
 118         }
 119     });
 120 });