Combo Box options appears in Top Left Corner in IE 9

[ashishchandras]

Hi

I am using ExtJS 4 version latest one and in which facing an issue in IE where combo-box options are getting appeared on TOP LEFT corner of the page. It appears fine for the first time, however, once I select any value and move focus somewhere else on page and come back to my combobox the options start appearing at TOP LEFT of browser.

This is only happening in IE and working fine on FF. Here is my code for combobox.

                    xtype: 'combobox',
                        fieldLabel: 'Status',
                        labelAlign: 'right',
                        labelWidth: 60,
                        store: status,
                        displayField: 'status',
                        valueField: 'status',
                        hiddenName: 'custStatSel',
                        forceSelection: true,
                        editable: false,
                        maxHeight: 30,
                        triggerAction: 'all',
                        mode: 'local',
                        id: 'custStat',
                        columnWidth: .16

PS -> Based on reads about similar issue in few forums, I have tried commenting hiddenField and ensuring id used is unique. Still the problem exists.

Does anyone faced similar issue and has got any workaround for the same? Please let me know.
Thanks.

[skirtle]

Bit of a long shot but try switching mode: 'local' to queryMode: 'local'. Even if it doesn't fix it it's something you should do anyway.

I'd also get rid of maxHeight, hiddenName, forceSelection and valueField. I don't think any of them will be doing anything useful.

[ashishchandras]

Hi,

Thanks for reply, done that as shown below, problem still exists.

     xtype   : 'combobox',
                        fieldLabel  : 'Status',
                        labelAlign  : 'right',
                        labelWidth  : 60,
                        store   : status,
                        displayField : 'status',
                      // valueField  : 'status',
                        //hiddenName : 'custStatSel',
                      // forceSelection : true,
                        editable  : false,
                        //maxHeight  : 30,
                        triggerAction : 'all',
                        queryMode  : 'local',
                        id    : 'custStat',
                        columnWidth  : .16

[williambeaker]

Hi there, i was wondering if anyone found a resolution to this problem, because we are having the same issue. What we found is that when you drop down the combo box the FIRST time, it works fine, but when you make a selection, then drop it down again, it will display in the upper left corner. Works fine in FireFox.

Thanks

[fschaeffer]

I had this once when I used an id on a Combo and then reused that component so the id was in fact used twice...

[twonky4]

I found a workaround: http://www.learnsomethings.com/2011/...f-the-browser/

You have to set onTriggerClick and onKeyUp.

Ext.override(Ext.form.field.ComboBox, {
  onTriggerClick: function(){
   var me = this;
   me.clearValue();
         if (!me.readOnly && !me.disabled) {
            if (me.isExpanded) {
                me.collapse();
            } else {
                me.expand();
            }
            me.inputEl.focus();
        }
   },
    onKeyUp: function(e, t) {
        var me = this,
            key = e.getKey(),
      rv = me.getRawValue();
        if (!me.readOnly && !me.disabled && me.editable) {
            me.lastKey = key;
            // we put this in a task so that we can cancel it if a user is
            // in and out before the queryDelay elapses
            // perform query w/ any normal key or backspace or delete
            if (!e.isSpecialKey() || key == e.BACKSPACE || key == e.DELETE) {
                me.clearValue();
                me.setRawValue(key_val);
                me.doQueryTask.delay(me.queryDelay);
            }
        }
        if (me.enableKeyEvents) {
            me.callParent(arguments);
        }
    }
});