examples/dd/dnd_grid_to_grid.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.grid.*',
  17     'Ext.data.*',
  18     'Ext.dd.*'
  19 ]);
  20
  21 Ext.define('DataObject', {
  22     extend: 'Ext.data.Model',
  23     fields: ['name', 'column1', 'column2']
  24 });
  25
  26 Ext.onReady(function(){
  27
  28     var myData = [
  29         { name : "Rec 0", column1 : "0", column2 : "0" },
  30         { name : "Rec 1", column1 : "1", column2 : "1" },
  31         { name : "Rec 2", column1 : "2", column2 : "2" },
  32         { name : "Rec 3", column1 : "3", column2 : "3" },
  33         { name : "Rec 4", column1 : "4", column2 : "4" },
  34         { name : "Rec 5", column1 : "5", column2 : "5" },
  35         { name : "Rec 6", column1 : "6", column2 : "6" },
  36         { name : "Rec 7", column1 : "7", column2 : "7" },
  37         { name : "Rec 8", column1 : "8", column2 : "8" },
  38         { name : "Rec 9", column1 : "9", column2 : "9" }
  39     ];
  40
  41     // create the data store
  42     var firstGridStore = Ext.create('Ext.data.Store', {
  43         model: 'DataObject',
  44         data: myData
  45     });
  46
  47
  48     // Column Model shortcut array
  49     var columns = [
  50         {text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'},
  51         {text: "column1", width: 70, sortable: true, dataIndex: 'column1'},
  52         {text: "column2", width: 70, sortable: true, dataIndex: 'column2'}
  53     ];
  54
  55     // declare the source Grid
  56     var firstGrid = Ext.create('Ext.grid.Panel', {
  57         multiSelect: true,
  58         viewConfig: {
  59             plugins: {
  60                 ptype: 'gridviewdragdrop',
  61                 dragGroup: 'firstGridDDGroup',
  62                 dropGroup: 'secondGridDDGroup'
  63             },
  64             listeners: {
  65                 drop: function(node, data, dropRec, dropPosition) {
  66                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
  67                     Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
  68                 }
  69             }
  70         },
  71         store            : firstGridStore,
  72         columns          : columns,
  73         stripeRows       : true,
  74         title            : 'First Grid',
  75         margins          : '0 2 0 0'
  76     });
  77
  78     var secondGridStore = Ext.create('Ext.data.Store', {
  79         model: 'DataObject'
  80     });
  81
  82     // create the destination Grid
  83     var secondGrid = Ext.create('Ext.grid.Panel', {
  84         viewConfig: {
  85             plugins: {
  86                 ptype: 'gridviewdragdrop',
  87                 dragGroup: 'secondGridDDGroup',
  88                 dropGroup: 'firstGridDDGroup'
  89             },
  90             listeners: {
  91                 drop: function(node, data, dropRec, dropPosition) {
  92                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
  93                     Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
  94                 }
  95             }
  96         },
  97         store            : secondGridStore,
  98         columns          : columns,
  99         stripeRows       : true,
 100         title            : 'Second Grid',
 101         margins          : '0 0 0 3'
 102     });
 103
 104     //Simple 'border layout' panel to house both grids
 105     var displayPanel = Ext.create('Ext.Panel', {
 106         width        : 650,
 107         height       : 300,
 108         layout       : {
 109             type: 'hbox',
 110             align: 'stretch',
 111             padding: 5
 112         },
 113         renderTo     : 'panel',
 114         defaults     : { flex : 1 }, //auto stretch
 115         items        : [
 116             firstGrid,
 117             secondGrid
 118         ],
 119         dockedItems: {
 120             xtype: 'toolbar',
 121             dock: 'bottom',
 122             items: ['->', // Fill
 123             {
 124                 text: 'Reset both grids',
 125                 handler: function(){
 126                     //refresh source grid
 127                     firstGridStore.loadData(myData);
 128
 129                     //purge destination grid
 130                     secondGridStore.removeAll();
 131                 }
 132             }]
 133         }
 134     });
 135 });
 136