PDA

View Full Version : [CLOSED-774] FormPanel content does not care about fbar?



ExtKD
23 Mar 2010, 12:02 PM
n/a

Jamie Avins
23 Mar 2010, 3:30 PM
Please try to follow the bug forum guidelines: http://www.extjs.com/forum/showthread.php?t=71015

For this issue, what version of Ext are you using?

Jamie Avins
23 Mar 2010, 4:07 PM
The problem is that the FormLayout (AnchorLayout by extension) is not really built to handle sizing of subcontainers well (a tabpanel in your case). The way to handle this would be to use a vbox, put the top two fields in a container (simple div) and they can use a form layout as normal. Then flex the TabPanel below and this should fill the remaining space properly. Tested this under 3.1.1 and 3.2-rc.



MyWindowUi = Ext.extend(Ext.Window, {
title: 'My Window',
width: 604,
height: 383,
layout: 'fit',
initComponent: function() {
this.items = [
{
xtype: 'form',
title: 'My Form',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
frame: true,
items: [
{
xtype: 'container',
labelWidth: 100,
labelAlign: 'left',
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}, {
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}]
},
{
xtype: 'tabpanel',
flex: 1,
activeTab: 0,
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Top Button'
}
]
},
bbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Bottom Button'
}
]
},
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
}
]
}
];
this.fbar = {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Save'
},
{
xtype: 'button',
text: 'Cancel'
}
]
};
MyWindowUi.superclass.initComponent.call(this);
}
});

evant
23 Mar 2010, 5:45 PM
You can do both of those, both the flex and set the layout config options.

evant
23 Mar 2010, 6:04 PM
http://img217.imageshack.us/img217/8277/designer.png

Jamie Avins
24 Mar 2010, 7:57 AM
Theis was closed because the form layout is doing what it was designed to do. The anchors you set are relative to the entire container, not to what is remaining in that container. Your anchor: '100% 100%' setting for the tabpanel means the height of that component fills 100% of the container's entire width and height, not 100% of what remains available at the time the anchor is set.

I'll get an item opened for the designer team to look at the flex for vbox, sounds like an issue there.