Accordion losing expand/collapse icons

[Robdor]

Hello Everybody,

I've run into a problem with a border layout and accordions. Basically what I'm trying to do is swap out the accordions in the west region any time a new tab is accessed. After clicking on tab2, then back to tab1 the expand/collapse icons on the accordion disappear. If I make the title bar collapsible then the bottom two items in the accordion don't expand to fill the entire accordion container.

I imagine that I'm probably just missing something, but not sure what. I appreciate any help and pointers that you guys can give.

layout definition


Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout:"border",
items:[
// header
new Ext.BoxComponent({
region: "north",
el: "applicationHeader",
height: 80
}) ,{
// actions
region: "west",
layout: "fit",
id: "actionPanel",
title: "",
collapsible: true,
split: true,
width: 225,
minSize: 175,
maxSize: 350,
margins: "0 5 0 0"
},
new Ext.TabPanel({
// content
region: "center",
activeTab: 0,
items:[{
title: "Tab 1",
listeners: {activate: handleActivate},
id: "t1",
autoScroll: true
}, {
title: "Tab 2",
listeners: {activate: handleActivate},
id: "t2",
autoScroll: true
}]
})
]
});


});
Accordion Swapper


var tab1_accordion = new Ext.Panel({
title: 'Accordion for tab 1',
layout:'accordion',
id: 'tab1_accordion',
layoutConfig: {
// layout-specific configs go here
animate: true,
titleCollapse: false
},
items: [{
title: 'actions',
html: '<p>Panel content!</p>'
},{
title: 'settings',
html: '<p>Panel content!</p>'
},{
title: 'links',
html: '<p>Panel content!</p>'
}]
});

var tab2_accordion = new Ext.Panel({
title: 'Accordion for tab 2',
layout:'accordion',
id: 'tab2_accordion',
layoutConfig: {
// layout-specific configs go here
animate: true,
titleCollapse: false
},
items: [{
title: 'delete',
html: '<p>Panel content!</p>'
},{
title: 'add',
html: '<p>Panel content!</p>'
},{
title: 'list',
html: '<p>Panel content!</p>'
}]
});

function handleActivate(tab) {
panel = Ext.getCmp('actionPanel');

if (tab.id == "t1") {
panel.remove("tab2_accordion");
panel.doLayout();
panel.add(tab1_accordion);
panel.doLayout();
} else {
panel.remove("tab1_accordion");
panel.doLayout();
panel.add(tab2_accordion);
panel.doLayout();
}
}