PDA

View Full Version : [SOLVED] ComboBox width in collapsed rendered panel



bramvano
17 Aug 2009, 12:53 AM
I have a east panel which is being rendered collapsed by default. In that panel resides a Form with a groupingview containing (potentially) 4 ComboBoxes. One of these comboboxes is always visible (the one that's always rendered correctly). The other three are hidden by default and are set to be visible after some Xml stores are loaded and checked for the number of results they contain (show if store.getCount() > 1).The comboboxes have a fixed with specified.

If I render east panel expanded, the with of the comboboxes is displayed correctly, but if I render the east panel collapsed the fixed with is not being used. The comboboxes will be rendered wider then they are supposed to. I've tried setting "lazyInit: true" for the east panel, the Form and all the comboboxes. And I've tried setting "lazyRender: true" for all the same objects without the result I'm looking for. I've also tried rendering the comboboxes all visible by default and hiding them after checking the stores, but this makes no difference.

What else could I try?

bramvano
18 Aug 2009, 1:25 AM
No experiences with this (small) problem on the forum?

Lukman
18 Aug 2009, 3:50 AM
Which browser? What kind of layout did you use for the fieldset? And the code?

bramvano
18 Aug 2009, 4:29 AM
Thank you for replying :)


Browsers tested: Firefox IE/IE8 and Opera, Safari
the layout of the fieldset is 'fit'


One of the comboboxes (properties are the same on all comboboxes except for the store and value field of course)...

this.statusField = new Ext.form.ComboBox(
{
store: parent.Data.status,
displayField: 'statusText',
valueField: 'status',
typeAhead: true,
forceSelection: true,
hidden: true,
lazyRender: true,
mode: 'local',
triggerAction: 'all',
emptyText: ' Status...',
selectOnFocus: true,
editable: false,
width: 170,
listWidth: 170,
hideLabel: true,
hideMode: 'offset',
listeners: {
'select': {
fn: function(p){ this.apply(); },
scope: this
}
}
});Conditionaly I do ... this.statusField.setVisible(true); ... for all comboboxes exept for the first one. The first one (shown in image in the start post) always renders correctly.


The formPanel with fieldsets looks like this....

this.panel = new Ext.form.FormPanel(
{
autoHeight: true,
layout: 'fit',
frame: false,
lazyRender: true,
border: false,
hidden: true,
hideMode: 'offset',
padding: '5 5 5 5',
margin: '0 0 0 0',
items: [
{
xtype: 'fieldset',
layout: 'fit',
title: 'Filter by...',
collapsible: false,
autoHeight: true,
items: [this.statusField, this.sitesField, this.slasField, this.productsField]
},{
xtype: 'fieldset',
layout: 'fit',
title: 'Search',
collapsible: false,
autoHeight: true,
defaultType: 'textfield',
items : [this.searchField]
}],
buttons: [
{
text: 'Reset',
handler: function()
{
this.panel.getForm().reset();
this.statusField.setValue('active');
parent.Cases.loadData('all');
this.apply();
},
scope: this
},{
text: 'Search',
handler: function()
{
this.search();
},
scope: this
}]
});...which is an item in a panel that starts collapsed when the page is opened.
If I start the panel expanded the comboboxes are rendered correctly.

Lukman
18 Aug 2009, 4:45 AM
Try adding these config options into your fieldsets:


layout: 'form',
defaults: {
anchor: '100%'
},

bramvano
18 Aug 2009, 5:20 AM
You're a hero :) No need to set a fixed listWidth either anymore.
Problem solved!