Good day, everyone.
I've got small but annoying problem. I'm trying to work with column layout, so here the code
Code:
// initializing column panel
var panel = new Ext.Panel({
border: false,
autoHeight: true,
renderTo: Ext.get('applicationBody'),
cls: 'app-body',
layout: 'column',
bodyPadding: '0',
defaults: {
border: false,
autoHeight: true,
baseCls:'x-plain'
},
items: [
{
id: 'sidebar',
cls: 'fb-sidebar',
width: 200,
border: true
},
{
id: 'contentArea',
columnWidth: 1
}
]
});
//.............
// initializing components panel
var componentPanel = new Ext.Panel({
title: 'Predefined Components',
cls: 'fp-panel',
autoHeight: false,
bodyPadding: '10px',
border: false,
collapsible: true, // <---
maxHeight: 50,
layout: 'fit',
items: [ componentView ]
});
//injecting components panel into a column
var sidebarArea = panel.getComponent('sidebar');
sidebarArea.add(componentPanel);
sidebarArea.doLayout();
When I try to collapse componentsPanel, it works just fine, but I can't restore it. Seems that height calculations are all wrong. Here is screenshot with some explanations - http://www.pk69.com/tmp/ext_panel_callapsible.png
Also, I've played with Column layout example - http://dev.sencha.com/deploy/ext-4.0...t-browser.html
I set collapsible: true property for the 1st panel (titled "Width=0.25"). Collapse/expand works fine untill window is get resized. After resizing browser window, collapsed/expanded element are not fitting column width, it width stays the same all the time after collapse/expand action.