PDA

View Full Version : Moving items between regions in a border layout



zeke
6 Oct 2009, 3:26 PM
I'm trying to create a panel with a border layout that allows the user to move items between center, north, and west regions. I've tried to do what Animal suggested in the following thread:

http://www.extjs.com/forum/showthread.php?t=33781

To start with, I'm only defining one region (center) and am trying to replace the content in that region. I define 3 panels to begin with and assign the first one to the center region. Then I have a toolbar on the main panel with buttons for each of the 3 panels which should remove the current item in the center region and add the appropriate panel. This works the first time I move between panels but does not work after that.

It looks like the problem is when I remove the panel from the center region, it doesn't actually get removed. I want to be able to add the panel back later so I'm calling remove with autoDestroy=false. Here's my code, any help would be greatly appreciated. Thanks.



Ext.onReady(function() {

var panel1 = new Ext.Panel({
html:'Panel 1',
title: 'Panel 1'
});
var panel2 = new Ext.Panel({
html:'Panel 2',
title: 'Panel 2'
});
var panel3 = new Ext.Panel({
html:'Panel 3',
title: 'Panel 3'
});

var viewport = new Ext.Viewport({
layout:'fit',
items: [{
title: 'Main Panel',
layout:'border',
defaults: {layout:'fit'},
tbar: new Ext.Toolbar({
defaults: {
enableToggle:true,
toggleGroup:'t-group',
handler: function(button){
var mainPanel = button.ownerCt.ownerCt;
var centerPanel = mainPanel.items.itemAt(0);
console.info(centerPanel.items.itemAt(0)); //item to remove
centerPanel.remove(centerPanel.items.itemAt(0),false);

switch (button.panelNum) {
case 1:
centerPanel.add(panel1);
break;
case 2:
centerPanel.add(panel2);
break;
case 3:
centerPanel.add(panel3);
}

mainPanel.doLayout();
}
},
items: [{
text: 'Panel 1',
panelNum: 1,
pressed:true
},{
text: 'Panel 2',
panelNum: 2
},{
text: 'Panel 3',
panelNum: 3
}]
}),
items: [{
xtype:'panel',
title:'Center Panel',
region:'center',
items:[panel1]
}]
}]
});
});

6 Oct 2009, 4:28 PM
centerPanel.doLayout is not being called

zeke
6 Oct 2009, 4:50 PM
Hmm... yeah, I thought that since centerPanel is a child component of mainPanel the doLayout call would get passed down. Anyways, I tried adding a centerPanel.doLayout() and nothing changed. Perhaps I'm not calling it in the right place? Thanks.



Ext.onReady(function() {

var panel1 = new Ext.Panel({
html:'Panel 1',
title: 'Panel 1'
});
var panel2 = new Ext.Panel({
html:'Panel 2',
title: 'Panel 2'
});
var panel3 = new Ext.Panel({
html:'Panel 3',
title: 'Panel 3'
});

var viewport = new Ext.Viewport({
layout:'fit',
items: [{
title: 'Main Panel',
layout:'border',
defaults: {layout:'fit'},
tbar: new Ext.Toolbar({
defaults: {
enableToggle:true,
toggleGroup:'t-group',
handler: function(button){
var mainPanel = button.ownerCt.ownerCt;
var centerPanel = mainPanel.items.itemAt(0);
console.info(centerPanel.items.itemAt(0)); //item to remove
centerPanel.remove(centerPanel.items.itemAt(0),false);

switch (button.panelNum) {
case 1:
centerPanel.add(panel1);
break;
case 2:
centerPanel.add(panel2);
break;
case 3:
centerPanel.add(panel3);
}
centerPanel.doLayout(); //<-------ADDED------
mainPanel.doLayout();
}
},
items: [{
text: 'Panel 1',
panelNum: 1,
pressed:true
},{
text: 'Panel 2',
panelNum: 2
},{
text: 'Panel 3',
panelNum: 3
}]
}),
items: [{
xtype:'panel',
title:'Center Panel',
region:'center',
items:[panel1]
}]
}]
});
});