Drag and drop between two grids

  

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>

<body>
<script type="text/javascript">
Ext.onReady(function() {


    var myData = {
    records : [
      { name : "Rec 0", column1 : "0", column2 : "0" },
      { name : "Rec 1", column1 : "1", column2 : "1" },
      { name : "Rec 2", column1 : "2", column2 : "2" },
      { name : "Rec 3", column1 : "3", column2 : "3" },
      { name : "Rec 4", column1 : "4", column2 : "4" },
      { name : "Rec 5", column1 : "5", column2 : "5" },
      { name : "Rec 6", column1 : "6", column2 : "6" },
      { name : "Rec 7", column1 : "7", column2 : "7" },
      { name : "Rec 8", column1 : "8", column2 : "8" },
      { name : "Rec 9", column1 : "9", column2 : "9" }
    ]
  };


  // Generic fields array to use in both store defs.
  var fields = [
     {name: 'name', mapping : 'name'},
     {name: 'column1', mapping : 'column1'},
     {name: 'column2', mapping : 'column2'}
  ];

    // create the data store
    var firstGridStore = new Ext.data.JsonStore({
        fields : fields,
    data   : myData,
    root   : 'records'
    });


  // Column Model shortcut array
  var cols = [
    { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
    {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
    {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
  ];

  // declare the source Grid
    var firstGrid = new Ext.grid.GridPanel({
  ddGroup          : 'secondGridDDGroup',
        store            : firstGridStore,
        columns          : cols,
  enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : 'name',
        width            : 325,
  region           : 'west',
        title            : 'First Grid'
    });

    var secondGridStore = new Ext.data.JsonStore({
        fields : fields,
    root   : 'records'
    });

    // create the destination Grid
    var secondGrid = new Ext.grid.GridPanel({
  ddGroup          : 'firstGridDDGroup',
        store            : secondGridStore,
        columns          : cols,
  enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : 'name',
        width            : 325,
  region           : 'center',
        title            : 'Second Grid'
    });


  //Simple 'border layout' panel to house both grids
  var displayPanel = new Ext.Panel({
    width    : 650,
    height   : 300,
    layout   : 'border',
    renderTo : 'panel',
    items    : [
      firstGrid,
      secondGrid
    ],
    bbar    : [
      '->', // Fill
      {
        text    : 'Reset both grids',
        handler : function() {
          //refresh source grid
          firstGridStore.loadData(myData);

          //purge destination grid
          secondGridStore.removeAll();
        }
      }
    ]
  });

  // used to add records to the destination stores
  var blankRecord =  Ext.data.Record.create(fields);

  /****
  * Setup Drop Targets
  ***/
  // This will make sure we only drop to the view container
  var firstGridDropTargetEl =  firstGrid.getView().el.dom.childNodes[0].childNodes[1];
  var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
    ddGroup    : 'firstGridDDGroup',
    copy       : true,
    notifyDrop : function(ddSource, e, data){

      // Generic function to add records.
      function addRow(record, index, allItems) {

        // Search for duplicates
        var foundItem = firstGridStore.findExact('name', record.data.name);
        // if not found
        if (foundItem  == -1) {
          firstGridStore.add(record);

          // Call a sort dynamically
          firstGridStore.sort('name', 'ASC');

          //Remove Record from the source
          ddSource.grid.store.remove(record);
        }
      }

      // Loop through the selections
      Ext.each(ddSource.dragData.selections ,addRow);
      return(true);
    }
  });


  // This will make sure we only drop to the view container
  var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]

  var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
    ddGroup    : 'secondGridDDGroup',
    copy       : false,
    notifyDrop : function(ddSource, e, data){

      // Generic function to add records.
      function addRow(record, index, allItems) {

        // Search for duplicates
        var foundItem = secondGridStore.findExact('name', record.data.name);
        // if not found
        if (foundItem  == -1) {
          secondGridStore.add(record);
          // Call a sort dynamically
          secondGridStore.sort('name', 'ASC');

          //Remove Record from the source
          ddSource.grid.store.remove(record);
        }
      }
      // Loop through the selections
      Ext.each(ddSource.dragData.selections ,addRow);
      return(true);
    }
  });
});
</script> 

<div id="panel"></div>

</body>
</html>
Related examples in the same category

1.	Set up drag and drop zone
2.	Field to grid drag and drop
3.	Create Ext.dd.DragSource and Ext.dd.DropTarget
4.	Define notifyDrop handler
5.	Create DropTarget object
6.	Drop and drop from a table to a form
Drag and drop between two grids : Drag Drop « Ext JS « JavaScript DHTML

Related examples in the same category
