Hybrid View

  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,566
    Vote Rating
    306
    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);
            }
        }
    });