PDA

View Full Version : FormPanel with column layout on CardLayout problem



devnullable
12 Oct 2010, 2:00 AM
Hi,

I have a problem with following setup on Firefox and Chrome. Fieldsets and the parent div with class x-column-inner do not get style="width: WHATEVERpx;" at all. But if I change activeItem to 1 on config then everything is rendered correctly. Internet Explorer works correctly on both cases and sets width style.

So is there something wrong in my code or is this a bug in ExtJS?


var searchPanel = new Ext.form.FormPanel({
id: 'searchPanel',
width: 800,
frame: true,
title: 'Search',
layout: 'column',
defaults: {
layout: 'form',
border: false,
bodyStyle: 'padding:4px;'

},

items: [
{
xtype: 'fieldset',
columnWidth:0.5,
autoHeight: true,
defaults: {
anchor: '-20'

},
items: [

{
xtype: 'textfield',
id: 'field1',
fieldLabel: 'Field 1',
msgTarget: 'side',
width: 150
}


]

},
{
xtype: 'fieldset',
columnWidth:0.5,
autoHeight: true,
defaults: {
anchor: '-20'
},
items: [
{
xtype: 'textfield',
id: 'field2',
fieldLabel: 'Field 2',
msgTarget: 'side',
width: 150
}


]

}
]
});


Ext.onReady(function() {
var viewPort = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Test</h1>',

autoHeight: true,
border: false,
margins: '0 0 5 0'
},
{
region: 'center',
xtype: 'container',
id: 'myCardPanel',
layout: 'card',
frame: false,
layoutOnCardChange: true,
deferredRender: false,
activeItem: 0,

items: [
{


xtype: 'container',
border: false,
margins: '5 5 5 5',

items: [
{
xtype: 'button',
text: 'Change card',
handler: function() {
var cp = Ext.getCmp('myCardPanel');
cp.getLayout().setActiveItem(1);
}
}
]


},
{
xtype: 'container',
layout: 'vbox',


items: [searchPanel]




}
]
}
]
});

});

Animal
12 Oct 2010, 2:09 AM
When hidden using style display:none, the searchPanel's element reports zero width.

Configure it hideMode: 'offsets'.

And if you are strictly allocating the available width of the panel, best use "hbox" layout. Then you also get other nice configs like stretch and align if you need them.

Animal
12 Oct 2010, 2:11 AM
And this is an overnest:



{
xtype: 'container',
layout: 'vbox',


items: [searchPanel]




}


Just put the searchPanel in there. No need to wrap it in an extra layer of containment.

devnullable
12 Oct 2010, 2:26 AM
When hidden using style display:none, the searchPanel's element reports zero width.

Configure it hideMode: 'offsets'.
Thanks, but I added the hideMode: 'offsets' to FormPanel's config but it didn't help. Still no widths on Firefox and Chrome. Internet Explorer working correctly all the time.

The overnesting was a leftover of making a test case. In real code I have also GridPanel below the FormPanel.

Condor
12 Oct 2010, 2:35 AM
It's:

layoutConfig: {
layoutOnCardChange: true,
deferredRender: false
}

devnullable
12 Oct 2010, 2:40 AM
It's:

layoutConfig: {
layoutOnCardChange: true,
deferredRender: false
}

Thanks a lot Condor, that fixed the problem. Funny it worked all the time on IE, any idea why?