Results 1 to 7 of 7

Thread: How to make combo list open always on top

  1. #1
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,101
    Answers
    113
    Vote Rating
    100
      0  

    Default How to make combo list open always on top

    Hi,

    Is there some way to make the combobox list open always towards the top side (also on first time). The combobox is in a paging toolbar at the bottom of the page and on first time it is opened, it opens it below which causes scrollbars to appear. After that, it opens on the top and its fine.

    Regards,
    Farish

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87
    Vote Rating
    44
      0  

    Default

    override this one?

    set isAbove on true I think.

    Code:
    doAlign: function(){
            var me = this,
                picker = me.picker,
                aboveSfx = '-above',
                isAbove;
    
            me.picker.alignTo(me.inputEl, 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() < me.inputEl.getY();
            me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
            picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
        },
    in the combobox

  3. #3
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
      0  

    Default

    Take a look at the source for Ext.form.field.ComboBox and in particular, look at function alignPicker.

    You can do a global override of this method like so:

    Code:
    Ext.form.field.ComboBox.override({
      alignPicker: function() {
        <...modify code to meet your needs...>
      }
    });

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87
    Vote Rating
    44
      0  

    Default

    That function alignPicker is calling doAlign also in the ComboBox js.

  5. #5
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,101
    Answers
    113
    Vote Rating
    100
      0  

    Default

    thanks for your responses and sorry I wasn't clear. I only want to do it for that particular combobox and not all comboboxes. The reason, as I mentioned, is that it causes scrollbars to appear on the first time the picker is activated which doesn't look good.

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87
    Vote Rating
    44
      0  

    Default

    Then pass a param like 'alignAbove' in the config and override doAlign

    Code:
    doAlign: function(){
            var me = this,
                picker = me.picker,
                aboveSfx = '-above',
                isAbove;
    
            me.picker.alignTo(me.inputEl, 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
            
            if(me.alignAbove){
                isAbove = true;
            }else{
            isAbove = picker.el.getY() < me.inputEl.getY();
            }
    
            me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
            picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
        },

  7. #7
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,101
    Answers
    113
    Vote Rating
    100
      0  

    Default

    Hi. thanks again. I thought that would fix the problem for sure but it didnt. Here is the override I am using:

    Code:
    Ext.override(Ext.form.field.Picker, {
        doAlign: function(){
            var me = this,
                picker = me.picker,
                aboveSfx = '-above',
                isAbove;
    
            me.picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);
            
            alert(me.alignAbove);
            if(me.alignAbove)
                isAbove = true;
            else
                isAbove = picker.el.getY() < me.inputEl.getY();
            
            me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
            picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
        }
    });
    and I added alignAbove: true to the combobox. The alert in the override works. Its true when the config is used in the combobox; otherwise its undefined. Still, the list opens below the combobox on the first try...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •