PDA

View Full Version : Auto layout: items don't resize properly when change size of container



sciencebitch
22 Oct 2013, 11:41 PM
var panel1 = Ext.create('Ext.panel.Panel', {
title : "Panel 1",
html : "panel 1",
height : 60,
width : 100
});
var panel2 = Ext.create('Ext.panel.Panel', {
title : "Panel 1",
html : "panel 1",
height : 60,
width : 200
});
var panel3 = Ext.create('Ext.panel.Panel', {
title : "Panel 1",
html : "panel 1",
height : 60,
width : '100%'
});
var panel4 = Ext.create('Ext.panel.Panel', {
title : "Panel 1",
html : "panel 1",
height : 60,
width : 100
});
var auto = Ext.create('Ext.window.Window', {
title : 'auto Layout',
width : 100,
height : 320,
layout : 'auto',
defaults : {
bodyStyle : 'padding:15px;'
},
items : [panel1, panel2, panel3, panel4]
});

auto.show();
When I expand window, panels don't change size, but when constrict, even for a pixel, they change their sizes properly.

s000rd
23 Oct 2013, 2:00 AM
var auto = Ext.create('Ext.window.Window', {
title: 'auto Layout',
width: 100,
height: 320,
//layout: 'auto',
defaults: {
//bodyStyle: 'padding:15px;'
},
items: [panel1, panel2, panel3, panel4],
listeners:
{
resize: function ()
{
panel3.doLayout();
}
}
});

scottmartin
24 Oct 2013, 12:21 PM
It is a bit quirky in some instance, but vbox should give you the result you are looking for.

Scott.