I have a problem with a collapsible panel that is an item of a panel with border layout in ExtJS 4.2.2. Basiclly it is the following structure:
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
height: 400,
width: 600,
title: 'TestPanel',
renderTo: Ext.getBody(),
items: [
{ xtype: 'toolbar', items: [{xtype: 'button', text: 'test1'}, {xtype: 'button', text: 'test2'}, {xtype: 'button', text: 'test3'}]},
{
xtype: 'panel',
items: [
{ xtype: 'toolbar', items: [{xtype: 'button', text: 'another1'}, {xtype: 'button', text: 'another2'}, {xtype: 'button', text: 'another3'}]},
{
xtype: 'panel',
layout: 'border',
height: 600,
width: 200,
items: [
{xtype: 'panel', title: 'options', html: 'lalalalalalalalalala', region: 'west', width: 100, height: 100, collapsible: true, collapsed: true},
{xtype: 'panel', html: 'lalalalalalalalalala', region: 'center', width: 100, height: 100}
]
}
]
}
]
});
});
Here is the corresponding fiddle: http://jsfiddle.net/jLugR/
When you uncollapse the option panel everything works fine. When you collapse it again, it breaks the layout. Do you have any idea what the problem is and how I can handle it?