Making Ext.form.ComboBox more menu-ish

[corey.gilmore]

If you set ComboBox.innerList to unselectable it allows the mouse to be dragged down the list of items. If editable is false then you can safely set unselectable on ComboBox.el as well. This is what I threw together quickly to address my immediate need, but I'm not sure how to "unswallow" an event so if you later try and use setEditable(true) it won't work in IE. I guess you'd need to monitor drag start and mouseup to select an item when it's been selected while dragging?

edit: see code in post #3

[corey.gilmore]

Actually that was much easier than I thought, listening for innerList mouseup and using the collapse and expand events is all it takes! Here's the new code:

edit: see code in post #3

[corey.gilmore]

I forgot the TriggerField, and it seems to make more sense to complete disable any editing if you want to use this (at least as a standalone function like this). The only visual inconsistency I see is that the trigger field flickers if you just click it, and it doesn't appear depressed if you start open the menu w/o clicking on it.

Edit: fix to not close them menu when clicking on the scroll bar


/**
* Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
* through the list, with item selection occurring when the mouse button is released.
* When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
* on inner elements. Re-enabling editable after calling this will NOT work.
*/
Ext.form.ComboBox.prototype.mimicSelect = function() {
if( this.editable ) {
this.setEditable(false);
}
this.el.unselectable();
this.innerList.unselectable();
this.trigger.unselectable();
this.innerList.on('mouseup', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.onViewClick();
}, this);
this.trigger.un('click', this.onTriggerClick, this);
this.trigger.on('mousedown', function(e, target, options) {
e.preventDefault();
this.onTriggerClick();
}, this);

this.on('collapse', function(e, target, options) {
Ext.get(document).un('mouseup', this.collapseIf, this);
}, this, true);

this.on('expand', function(e, target, options) {
Ext.get(document).on('mouseup', this.collapseIf, this);
}, this, true);
};

[jack.slocum]

Hey Corey - what exactly does this do? :)

[corey.gilmore]

I threw up an example and cross-posted (http://extjs.com/forum/showthread.php?p=24735) (I know, I suck) in the examples section.

http://crepitus.com/misc/ext/combo.html

Basically it lets you click and hold the mouse down on a combo box, and drag the mouse through the list of items, selecting an item if you release the mouse while you're over it, or closing the menu if you're outside of it. I'm using the Dynarch menubar in some of my apps because they allow this more OS-like behavior, but now that I realize how easy it is to add the behavior I want (like flashing on select), I'll be dumping them and using the normal Menu item.

[jack.slocum]

I see - that is very cool. I think it would be a very useful config option - mimicSelect:true.

[corey.gilmore]

I see - that is very cool. I think it would be a very useful config option - mimicSelect:true.

If you could add something like that to the Menus too that would be great!

There are a few gotcha's with this but they shouldn't give you any trouble:
* If you mousedown and drag to the bottom of a list it doesn't scroll automatically
* typing to select/editing is disabled because I couldn't figure out how to unswallow the onselectstart event set by Element.unselectable()
* If editing is NOT disabled then there is a delay when you begin the drag from the ComboBox text area
* It seems there is a delay when the list is first displayed, but that might be my browser

What amazed me was how easy it was to add what I thought would be a complicated addition without using any private functions or modifying any public or private functions. Once I figured out how everything was tied together I didn't even have to write a line of new code, all the functions I needed were there.