X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/dd/dnd_grid_to_grid.js diff --git a/examples/dd/dnd_grid_to_grid.js b/examples/dd/dnd_grid_to_grid.js index 2310008f..0e25ae4c 100644 --- a/examples/dd/dnd_grid_to_grid.js +++ b/examples/dd/dnd_grid_to_grid.js @@ -1,135 +1,120 @@ -/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license - */ -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" } - ] - }; +Ext.require([ + 'Ext.grid.*', + 'Ext.data.*', + 'Ext.dd.*' +]); + +Ext.define('DataObject', { + extend: 'Ext.data.Model', + fields: ['name', 'column1', 'column2'] +}); +Ext.onReady(function(){ - // Generic fields array to use in both store defs. - var fields = [ - {name: 'name', mapping : 'name'}, - {name: 'column1', mapping : 'column1'}, - {name: 'column2', mapping : 'column2'} - ]; + var myData = [ + { 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" } + ]; // create the data store - var firstGridStore = new Ext.data.JsonStore({ - fields : fields, - data : myData, - root : 'records' + var firstGridStore = Ext.create('Ext.data.Store', { + model: 'DataObject', + data: myData }); - // 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', + // Column Model shortcut array + var columns = [ + {text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'}, + {text: "column1", width: 70, sortable: true, dataIndex: 'column1'}, + {text: "column2", width: 70, sortable: true, dataIndex: 'column2'} + ]; + + // declare the source Grid + var firstGrid = Ext.create('Ext.grid.Panel', { + viewConfig: { + plugins: { + ptype: 'gridviewdragdrop', + dragGroup: 'firstGridDDGroup', + dropGroup: 'secondGridDDGroup' + }, + listeners: { + drop: function(node, data, dropRec, dropPosition) { + var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view'; + Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn); + } + } + }, store : firstGridStore, - columns : cols, - enableDragDrop : true, + columns : columns, stripeRows : true, - autoExpandColumn : 'name', - title : 'First Grid' + title : 'First Grid', + margins : '0 2 0 0' }); - var secondGridStore = new Ext.data.JsonStore({ - fields : fields, - root : 'records' + var secondGridStore = Ext.create('Ext.data.Store', { + model: 'DataObject' }); // create the destination Grid - var secondGrid = new Ext.grid.GridPanel({ - ddGroup : 'firstGridDDGroup', + var secondGrid = Ext.create('Ext.grid.Panel', { + viewConfig: { + plugins: { + ptype: 'gridviewdragdrop', + dragGroup: 'secondGridDDGroup', + dropGroup: 'firstGridDDGroup' + }, + listeners: { + drop: function(node, data, dropRec, dropPosition) { + var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view'; + Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn); + } + } + }, store : secondGridStore, - columns : cols, - enableDragDrop : true, + columns : columns, stripeRows : true, - autoExpandColumn : 'name', - title : 'Second Grid' + title : 'Second Grid', + margins : '0 0 0 3' }); - - //Simple 'border layout' panel to house both grids - var displayPanel = new Ext.Panel({ - width : 650, - height : 300, - layout : 'hbox', - renderTo : 'panel', - defaults : { flex : 1 }, //auto stretch - layoutConfig : { align : 'stretch' }, - 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 scroller element - var firstGridDropTargetEl = firstGrid.getView().scroller.dom; - var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, { - ddGroup : 'firstGridDDGroup', - notifyDrop : function(ddSource, e, data){ - var records = ddSource.dragData.selections; - Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store); - firstGrid.store.add(records); - firstGrid.store.sort('name', 'ASC'); - return true - } - }); - - - // This will make sure we only drop to the view scroller element - var secondGridDropTargetEl = secondGrid.getView().scroller.dom; - var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, { - ddGroup : 'secondGridDDGroup', - notifyDrop : function(ddSource, e, data){ - var records = ddSource.dragData.selections; - Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store); - secondGrid.store.add(records); - secondGrid.store.sort('name', 'ASC'); - return true + //Simple 'border layout' panel to house both grids + var displayPanel = Ext.create('Ext.Panel', { + width : 650, + height : 300, + layout : { + type: 'hbox', + align: 'stretch', + padding: 5 + }, + renderTo : 'panel', + defaults : { flex : 1 }, //auto stretch + items : [ + firstGrid, + secondGrid + ], + dockedItems: { + xtype: 'toolbar', + dock: 'bottom', + items: ['->', // Fill + { + text: 'Reset both grids', + handler: function(){ + //refresh source grid + firstGridStore.loadData(myData); + + //purge destination grid + secondGridStore.removeAll(); } - }); - + }] + } + }); });