PDA

View Full Version : How to get scrollbar in panel with fieldsets on resize?



Chau
27 Oct 2010, 3:26 AM
I'm trying to get the scrollbars to appear when resizing my window to be smaller than the size of the contents.

The images show the window before and after I resize the window:

2303123032

I want the scrollbar to be on the tab and I understood from the documentation that the autoHeight: true should not be used on fieldsets.


var gui = new Ext.Window({
title: 'Window',
width: 300,
height: 300,
layout: 'fit',
resizable: true,
closable: true,
closeAction: 'close',
collapsible: false,
items:
[
{
xtype: 'tabpanel',
activeTab: 0,
items:
[
{
xtype: 'panel',
title: 'Panel',
layout: 'vbox',
layoutConfig: {
align: 'stretch',
pack: 'start'
},
bodyStyle: 'padding: 10px',
autoScroll: true,
items:
[
{
xtype: 'fieldset',
title: 'Fieldset',
layout: 'form',
autoHeight: false,
items:
[
{
xtype: 'textfield',
fieldLabel: 'Textfield',
anchor: '-10'
}, {
xtype: 'checkbox',
fieldLabel: 'Checkbox',
checked: false
}
]
}, {
xtype: 'fieldset',
title: 'Fieldset',
layout: 'form',
autoHeight: false,
items:
[
{
xtype: 'textfield',
fieldLabel: 'Textfield',
anchor: '-10'
}, {
xtype: 'textfield',
fieldLabel: 'Textfield',
anchor: '-10'
}
]
}
]
}
]
}
]
});

laurentParis
27 Oct 2010, 4:23 AM
var gui = new Ext.Window({
title: 'Window',
width: 300,
height: 300,
layout: 'fit',
resizable: true,
closable: true,
closeAction: 'close',
collapsible: false,
items: [{
xtype: 'tabpanel',
activeTab: 0,
items: [{
xtype: 'panel',
title: 'Panel',
//layout: 'vbox', << remove this line and it will be ok
layoutConfig: {
align: 'stretch',
pack: 'start'
},
bodyStyle: 'padding: 10px',
autoScroll: true,
items: [{
xtype: 'fieldset',
title: 'Fieldset',
layout: 'form',
autoHeight: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Textfield',
anchor: '-10'
},
{
xtype: 'checkbox',
fieldLabel: 'Checkbox',
checked: false
}]
},
{
xtype: 'fieldset',
title: 'Fieldset',
layout: 'form',
autoHeight: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Textfield',
anchor: '-10'
},
{
xtype: 'textfield',
fieldLabel: 'Textfield',
anchor: '-10'
}]
}]
}]
}]
});

Chau
27 Oct 2010, 4:26 AM
@laurentParis: You are quite right and thanks for your answer. I am curious thought, why does it work without me specifying a layout? And what layout does it defaults to?

I was under the impression, that I ought to specify the layout for all my containers?