PDA

View Full Version : ComboBox's View does not scroll with the input field



Animal
28 Jun 2007, 6:14 AM
When a ComboBox is in a container which is scrollable and has overflow, then if the list View is popped up, and then the mousewheel used to scroll the form, the list View stays static.

This is because it is an Ext.Layer which is rendered by default into document.body.

It should be rendered into the input field's container. The code below is my amendment to the creation of the Layer in ComboBox.onRender. My addition in bold:



this.list = new Ext.Layer({
parentEl: this.el.dom.parentNode,
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});

jack.slocum
29 Jun 2007, 12:52 AM
Unfortunately, it's not that easy. If rendered into the input's container and that container has an overflow of hidden OR is positioned, then the combo list is clipped by that element. Rendered to the body it is able to display of anything and behave similar to a standard select list.

Since scroll events don't bubble, to make it hide on scroll like a standard select you will have to attach the scroll event on the div and collapse the list.

Animal
29 Jun 2007, 2:46 AM
Does the mousewheel event bubble? That's the only form of scrolling that spoils the effect.

Mousing down on scroll bars hides the popup anyway.

Animal
29 Jun 2007, 3:36 AM
I'm using the TreeEditor now. It does the same thing, but also, it pops up in the wrong position when the TreePanel is scrolled:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/TreeEditor.jpg

mystix
29 Jun 2007, 9:56 AM
Could this other reported bug (http://extjs.com/forum/showthread.php?t=8482) be related?

Animal
6 Jul 2007, 3:02 AM
Unfortunately, it's not that easy. If rendered into the input's container and that container has an overflow of hidden OR is positioned, then the combo list is clipped by that element. Rendered to the body it is able to display of anything and behave similar to a standard select list.

Since scroll events don't bubble, to make it hide on scroll like a standard select you will have to attach the scroll event on the div and collapse the list.

The mousewheel event bubbles, so all that's needed is a document.on("mousewheel") handler which hides the active combobox.

Animal
9 Jul 2007, 1:27 AM
So I've added this to my overrides which makes it disappear on mousewheel. My additions in bold:



Ext.override(Ext.form.ComboBox, {
/**
* Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
*/
collapse : function(){
if(!this.isExpanded()){
return;
}
this.list.hide();
Ext.get(document).un('mousedown', this.collapseIf, this);
Ext.get(document).un('mousewheel', this.collapseIf, this);
this.fireEvent('collapse', this);
},

/**
* Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
*/
expand : function(){
if(this.isExpanded() || !this.hasFocus){
return;
}
this.list.alignTo(this.el, this.listAlign);
this.list.show();
Ext.get(document).on('mousedown', this.collapseIf, this);
Ext.get(document).on('mousewheel', this.collapseIf, this);
this.fireEvent('expand', this);
}
});

jack.slocum
9 Jul 2007, 1:41 AM
That looks nice Nige, I will add it in.

Animal
9 Jul 2007, 3:38 AM
Could be a perfect application for the multiple handler addition syntax of Observable...

It would be good to have an example of that in the Ext codebase to refer to.