1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    24
    Vote Rating
    0
    ashishchandras is on a distinguished road

      0  

    Default Combo Box options appears in Top Left Corner in IE 9

    Combo Box options appears in Top Left Corner in IE 9


    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.

    Code:
                        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.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    24
    Vote Rating
    0
    ashishchandras is on a distinguished road

      0  

    Default Reply

    Reply


    Hi,

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

    Code:
         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

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
    williambeaker is on a distinguished road

      0  

    Default


    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

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    Germany, Berlin
    Posts
    135
    Vote Rating
    11
    fschaeffer will become famous soon enough

      0  

    Default


    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...

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    0
    twonky4 is on a distinguished road

      0  

    Default


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

    You have to set onTriggerClick and onKeyUp.

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

  7. #7
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    941
    Vote Rating
    66
    westy is just really nice westy is just really nice westy is just really nice westy is just really nice

      0  

    Default


    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...
    Product Architect
    Altus Ltd.

  8. #8
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    941
    Vote Rating
    66
    westy is just really nice westy is just really nice westy is just really nice westy is just really nice

      0  

    Default


    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.
    Code:
        /**
         * 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
    Last edited by westy; 15 Dec 2011 at 7:35 AM. Reason: php tags broken (again)
    Product Architect
    Altus Ltd.

  9. #9
    Touch Premium Member
    Join Date
    Sep 2011
    Location
    Karlstad, Sweden
    Posts
    3
    Vote Rating
    0
    svanemark is on a distinguished road

      0  

    Default


    It sure did for me, thanks westy!

  10. #10
    Sencha User
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
    info@abilis.de is on a distinguished road

      0  

    Default Found a cause for this behaviour ...

    Found a cause for this behaviour ...


    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
    Code:
    <!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.