PDA

View Full Version : How to make combo list open always on top



Farish
18 Jul 2012, 4:34 AM
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

tvanzoelen
18 Jul 2012, 4:46 AM
override this one?

set isAbove on true I think.


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

friend
18 Jul 2012, 4:47 AM
Take a look at the source for Ext.form.field.ComboBox (http://docs.sencha.com/ext-js/4-1/source/ComboBox2.html#Ext-form-field-ComboBox) and in particular, look at function alignPicker.

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



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

tvanzoelen
18 Jul 2012, 4:55 AM
That function alignPicker is calling doAlign also in the ComboBox js.

Farish
18 Jul 2012, 4:56 AM
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.

tvanzoelen
18 Jul 2012, 5:02 AM
Then pass a param like 'alignAbove' in the config and override doAlign



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

Farish
18 Jul 2012, 6:31 AM
Hi. thanks again. I thought that would fix the problem for sure but it didnt. Here is the override I am using:


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