Borderlayout expand/collapse region (no borders)

[smcneill]

I have a borderlayout with an east region and a center region. I'd like the east region hidden initially. When the user clicks a button, validation of the data entry in the center region will occur, and if there're errors I want them displayed in the east region.

I've got this working by hiding/showing the east region, but I'd like to animate the hide/show. I can't seem to figure this out.

Arguably the expand/collapse feature will do what I want, but I don't want the user to be able to expand or collapse the region. Even if I set the collapseMode to mini and collapsible to false, the user still sees the splitbar (when the region is collapsed). I'd prefer to obscure anything that would suggest that the user could expand/collapse the region (or that the region even exists).

Any ideas?

[skirtle]

I think this does what you want. It both collapses and hides the east region. To ensure everything animates cleanly the east region is initially created visible and then hidden immediately.


var panel = new Ext.Panel({
height: 600,
layout: 'border',
renderTo: Ext.getBody(),
width: 600,
items: [
{
region: 'center',
title: 'Center',
tbar: [{
text: 'Click',
handler: function() {
panel.east.show();
panel.east.expand();
}
}]
}, {
ref: 'east',
region: 'east',
title: 'East',
width: 200
}
]
});

panel.east.hide();
panel.east.collapse();