PDA

View Full Version : hidden fields continue to occupy space



raj_plays
16 Apr 2011, 7:15 AM
Hi,
My combo box governs which of the 2 hbox-es to show.
Each hbox contains some fields. I hide one and show the other.
The problem is that the hidden hbox continues to occupy its space.
It works like visibility: 'hidden' instead of display: 'none'. Please help.


var statisticsForm = new Ext.FormPanel({
monitorValid: true,
border: false,
enableRowHeightSync: true,
width: 700,
items: [{
layout: 'hbox',
border: false,
align: 'middle',
items: [{
xtype: 'label',
text: 'Show inventory for:'
}, {
xtype: 'combo',
submitValue: false,
typeAhead: true,
triggerAction: 'all',
forceSelection: true,
store: new Ext.data.SimpleStore({
fields: ['value', 'name'],
data: [
[0, 'Selected campaign'],
[1, 'All campaigns']
]
}),
mode: 'local',
displayField: 'name',
valueField: 'value',
value: 0,
width: 130,
listWidth: 130,
listeners: {
select: function (combo, record, index) {
if (index == 0) {
Ext.getCmp('selectedInventoryFields').setVisible(true);
Ext.getCmp('allInventoryFields').setVisible(false);
} else {
Ext.getCmp('selectedInventoryFields').setVisible(false);
Ext.getCmp('allInventoryFields').setVisible(true);
}
}
}
}, {
xtype: 'spacer',
width: 20
}, {
id: 'selectedInventoryFields',
layout: 'hbox',
border: false,
width: 290,
items: [{
xtype: 'label',
text: 'From:'
}, {
xtype: 'spacer',
width: 5
}, {
xtype: 'datefield',
id: 'start_date',
maxLength: 10,
format: 'Y-m-d',
width: 100,
value: new Date().clearTime(),
allowBlank: false
}, {
xtype: 'spacer',
width: 10
}, {
xtype: 'label',
text: 'To:'
}, {
xtype: 'spacer',
width: 5
}, {
xtype: 'datefield',
id: 'end_date',
maxLength: 10,
format: 'Y-m-d',
width: 100,
value: new Date().clearTime(),
allowBlank: false
}]
}, {
id: 'allInventoryFields',
layout: 'hbox',
border: false,
width: 130,
hidden: true,
items: [{
xtype: 'label',
text: 'On:'
}, {
xtype: 'spacer',
width: 5
}, {
xtype: 'datefield',
id: 'start_date1',
maxLength: 10,
format: 'Y-m-d',
width: 100,
value: new Date().clearTime(),
allowBlank: false
}]
}, {
xtype: 'spacer',
width: 10
}, {
xtype: 'button',
id: 'btnSubmit',
text: 'Proceed',
width: 70,
formBind: true,
listeners: {
'click': {
scope: this,
fn: submit
}
}
}]
}]
});

raj_plays
17 Apr 2011, 10:55 PM
Anyone?
A pointer....I am hiding the container (h-box) and expecting that all is child items will also get hidden.
Is this too much to ask??

varunach
18 Apr 2011, 6:58 AM
when the hbox 'allInventoryFields' is initially rendered does it occupy space?

instead of using changing the hideMode config option, simply use
Ext.getCmp('allInventoryFields').setVisible(false);

raj_plays
18 Apr 2011, 11:10 PM
Thanks for the reply, varunach.
I am not using hideMode anywhere
and yes, initially allInventoryFields hbox occupies space.

The question is can i hide a container and expect its child items to get hidden as well?

raj_plays
20 Apr 2011, 10:08 PM
I was able to solve this by doing statisticsForm.doLayout().
So, after form elements are hidden or shown, a call to form.doLayout() is necessary.