-
- //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();