X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/dnd_grid_to_grid.html
diff --git a/docs/source/dnd_grid_to_grid.html b/docs/source/dnd_grid_to_grid.html
new file mode 100644
index 00000000..d84b6d22
--- /dev/null
+++ b/docs/source/dnd_grid_to_grid.html
@@ -0,0 +1,173 @@
+
+
+ The source code
+
+
+
+
+ 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);
+ }
+ });
+});
+
+
+
\ No newline at end of file