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);
        }
    }
});

[westy]

Sorry but no idea what that workaround is meant to do... doesn't do anything for me :/

I get the issue in IE8 with one particular combobox, which is odd.

Anyway, what I've tracked down is in the combobox's doAlign method (inherited from Picker) me.inputEl.getX() and getY() both return zero; putting the picker up at the top left of the screen.
Changing me.inputEl to me.getEl() aligns the picker at the label, so it's closer, but not quite there yet.

Going to keep digging...

[westy]

Ok, it's quite filthy but have worked around it, and seems ok in IE6, 7, 8, 9, FF, Chrome and Safari.
Not tested in Opera... sorry Opera fans

Add this to your combobox class, or override the Ext combobox if not got your own.

    /**
     * Override of alignment issue where dropdown appears in the top-left corner of the page.
     */
    doAlign: function(){
        var me = this,
            picker = me.picker,
            aboveSfx = '-above',
            isAbove;


        // Ext version uses inputEl, but this (in IE8) has an position of 0,0
        // This grabs the input element from our child div.
        var el = Ext.get(me.getEl().child('div'));


        // If we're in an old version of IE, set an offset (since it's a bit off it seems)...
        // IE6 seems fine though, funnily enough.
        if (Ext.isIE7 || Ext.isIE8) {
            if (!me.pickerOffset) {
                me.pickerOffset = [-2, 0];  // Y-coordinate does not appear to do anything
            }
        }


        me.picker.alignTo(el, me.pickerAlign, me.pickerOffset);


        // add the {openCls}-above class if the picker was aligned above
        // the field due to hitting the bottom of the viewport
        isAbove = picker.el.getY() < el.getY();
        me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
        picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
    }

Hope this helps.

Cheers,
Westy

[svanemark]

It sure did for me, thanks westy!

[info@abilis.de]

The combox options appear in the upper left corner when IE 9 is in Quirks mode and when I use comboxBox.setValue() method to assign an intial value to my combobox.

After adding

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

to my JSP/HTML start page Internet Explorer shows my page in IE 9 standard mode and my combobox works exactly as in all other tested browsers.

Hope that helps someone.