Hi all, I encountered this problem the other day and couldn't find any solutions. So here I am for some help.

I've got two gridpanels, one is on the page(say GridA), the other is on an Ext.window on the page(say Grid.

they have the same tbar definition and combobox definition like below

tbar:[{
text:'type'
},typeCombo,{
text:'Query',
handler: function(){

}
}]

and the combobox's definition like this:

var indtypeCombo = new Ext.form.ComboBox({
id:'indtypeFilter',
hideMode:'offsets',
store: indtypeStore,
displayField: 'name',
valueField: 'code',
width:70,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
editable: false,
allowBlank:true
});

the two combobox have exactly same definition except for their ids. But they appear different. The GridA shows well, so does the combobox on the tbar. The other combobox on GridB's tbar doesn't.

In IE8, the down-arrow trigger button is 1 or 2 pix lower then the textfield, and the 'Query' button was covered by the trigger button about less then half of its body.
In ff, the down-arrow trigger button is fine, but the 'Query' button is completely covered by the combobox, acturally it's covered by the textfield,seems the 'Query' button is right next to the labelfield 'type' instead of the combobox.

on the page, GridA is on the center region of the viewport. GridB is on a panel in an Ext.window. the panel has a card-layout, and GridB is in the last card(items) of the panel.

I just can't get it. Where did I go wrong? Any suggestion is welcomed. Thanks in advance~~~~~~~