PDA

View Full Version : Combobox disappear in IE ?



joesik
23 Dec 2010, 6:12 PM
I've try to use the following code to show the 'problem' , In my application, I've got a tabpanel with two tab, on init, the combo reside in 'Advanced' tab should be disabled, on the code, in order to shown the effect, I've set it to enabled.
There is a button 'Clear' on the 'Simple' Tab, which the usage is to clear all the fields both in Simple and Advanced Tab, in the sample code here , I just set the combo on the Advabced Tab to disable

Here's the code



var pnlSimpleField = new Ext.Panel({
frame: false,
border: false,
layout: 'form',
items: [new Ext.Panel({
layout: 'column',
border: false,
frame: false,
autoHeight: true,
bodyStyle: 'padding: 5px',
items: [new Ext.Panel({
columnWidth: 0.25,
layout: 'form',
border: false,
labelWidth: 60,
items: [{xtype: 'combo', fieldLabel: 'test', width: 150}]
}), new Ext.Panel({
columnWidth: 0.25,
layout: 'form',
border: false,
labelWidth: 60,
items: [{xtype: 'textfield', fieldLabel: 'test'}]
}), new Ext.Panel({
columnWidth: 0.25,
layout: 'form',
border: false,
labelWidth: 60,
items: [{xtype: 'textfield', fieldLabel: 'test'}]
}), new Ext.Panel({
columnWidth: 0.25,
layout: 'form',
border: false,
labelWidth: 80,
items: [{xtype: 'textfield', fieldLabel: 'test'}]
})]
}), {
layout: 'form',
border: false,
frame: false,
items: [{xtype: 'button', text: 'Clear', handler: function() {
Ext.getCmp('testing').setDisabled(true);
}}]
}]
});

var pnlAdvField = new Ext.Panel({
frame: false,
border: false,
layout: 'form',
items: [new Ext.Panel({
layout: 'column',
border: false,
frame: false,
autoHeight: true,
bodyStyle: 'padding: 5px',
items: [new Ext.Panel({
columnWidth: 0.25,
layout: 'form',
border: false,
labelWidth: 60,
items: [{xtype: 'combo', fieldLabel: 'test', width: 150, id: 'testing'}]
}), new Ext.Panel({
columnWidth: 0.25,
layout: 'form',
border: false,
labelWidth: 60,
items: [{xtype: 'textfield', fieldLabel: 'test'}]
}), new Ext.Panel({
columnWidth: 0.25,
layout: 'form',
border: false,
labelWidth: 60,
items: [{xtype: 'textfield', fieldLabel: 'test'}]
}), new Ext.Panel({
columnWidth: 0.25,
layout: 'form',
border: false,
labelWidth: 80,
items: [{xtype: 'textfield', fieldLabel: 'test'}]
})]
})]
});
var pnlAdvanced = new Ext.Panel({
frame: false,
border: false,
id: 'advance',
layout: 'form',
autoHeight: true,
// forceLayout: true,
title: 'Advanced',
items: pnlAdvField
});
var pnlSimple = new Ext.Panel({
frame: false,
border: false,
id: 'simple',
layout: 'form',
autoHeight: true,
title: 'Simple',
items: pnlSimpleField
});

var pnl = new Ext.TabPanel({
frame: false,
border: false,
plain: true,
deferredRender: false,
autoHeight: true,
activeTab: 0,
items: [pnlSimple, pnlAdvanced]
})
var p = new Ext.Viewport({
border: false,
frame: false,
layout: 'fit',
items: pnl
})


Once I press the 'clear' button and switch back to Advanced Tab, the combo will 'disappear' in IE8, what's the problem ? and how to overcome it ? :-?

23965

firefoxSafari
23 Dec 2010, 11:11 PM
You might try hideMode: 'offsets' for the Panel that gets added as a tab panel. It looks like the dimensions aren't being calculated correctly with the default hideMode when the combo is hidden and disabled.



var pnlAdvanced = new Ext.Panel({
frame: false,
border: false,
id: 'advance',
layout: 'form',
hideMode: 'offsets',
autoHeight: true,
// forceLayout: true,
title: 'Advanced',
items: pnlAdvField
});


It also looks like you have a lot of extra nested panels - you might want to minimize this.