jotapepinheiro/dragdrop.html

## dragdrop.html
<!--
/*!
 * 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_4/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext_3_4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext_3_4/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) {
      function addRow(record, index, allItems) {
        var foundItem = firstGridStore.findExact('name', record.data.name);
        if (foundItem == -1) {
          firstGridStore.add(record);
          firstGridStore.sort('name', 'ASC');
          ddSource.grid.store.remove(record);
        }
      }
      Ext.each(ddSource.dragData.selections, addRow);
      return (true);
    }
  });

  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) {
      function addRow(record, index, allItems) {
        var foundItem = secondGridStore.findExact('name', record.data.name);
        if (foundItem == -1) {
          secondGridStore.add(record);
          secondGridStore.sort('name', 'ASC');
          ddSource.grid.store.remove(record);
        }
      }
      Ext.each(ddSource.dragData.selections, addRow);
      return (true);
    }
  });
});
</script>

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

</body>
</html>
	<!--
	/*!
	* 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_4/resources/css/ext-all.css" />
	<script type="text/javascript" src="../ext_3_4/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext_3_4/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) {
	function addRow(record, index, allItems) {
	var foundItem = firstGridStore.findExact('name', record.data.name);
	if (foundItem == -1) {
	firstGridStore.add(record);
	firstGridStore.sort('name', 'ASC');
	ddSource.grid.store.remove(record);
	}
	}
	Ext.each(ddSource.dragData.selections, addRow);
	return (true);
	}
	});

	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) {
	function addRow(record, index, allItems) {
	var foundItem = secondGridStore.findExact('name', record.data.name);
	if (foundItem == -1) {
	secondGridStore.add(record);
	secondGridStore.sort('name', 'ASC');
	ddSource.grid.store.remove(record);
	}
	}
	Ext.each(ddSource.dragData.selections, addRow);
	return (true);
	}
	});
	});
	</script>

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

	</body>
	</html>