View Full Version : correct way to unset ComboBox (SelectBox) selection?

13 Jun 2010, 2:30 PM
I'm using a SelectBox for an optional field. When first rendered, the SelectBox has no selection. If you select something, there's no way to unset the SelectBox, all you can do is select a different option. What is the correct way to allow the user to unset the SelectBox?

I thought of adding an empty or "no selection" record to the SelectBox's store, but this feels like the wrong solution to the wrong problem. The SelectBox for the optional field in question shares its store with another SelectBox which is not optional. So the ability to choose no selection should be limited to the optional SelectBox, which it would not be if I modified the shared store. To support this use case, I imagine SelectBox accepting a config parameter "allowUnset", which if true adds a blank option to the top of the list. Is this use case supported using the existing APIs though? If not, what would be the correct way to support it?

Thanks in advance!

(I originally posted here (http://www.extjs.com/forum/showthread.php?6392-Ext.form.SelectBox-(Make-a-ComboBox-work-behave-like-an-HTML-SELECT)&p=472987#post472987), but just realized it was an out-of-date forum, so hopefully this is a better place.)

13 Jun 2010, 10:19 PM
Use Animal's TwinTriggerCombo (http://www.extjs.com/forum/showthread.php?12984-Feature-Request-Clearable-ComboBox&p=232225#post232225).

14 Jun 2010, 6:07 AM
Thanks, that did just the trick with some slight modification:

ClearableSelectBox = Ext.extend(Ext.ux.SelectBox, {
trigger1Class: Ext.ux.SelectBox.prototype.triggerClass,
trigger2Class: 'x-form-clear-trigger',
initComponent: function() {
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
onTrigger1Click: function() { this.fireEvent('onTriggerClick', this); },
onTrigger2Click: function() { this.reset(); this.collapse(); }

One remaining problem is that when you mousedown on the clear trigger, it's causing the SelectBox to expand, hence my bandaid call to collapse() in onTrigger2Click. I couldn't figure out where expand is getting bound to the clear trigger's mousedown event so I could unbind it. I'd love to fix this properly so that when you click the clear trigger, you don't see the SelectBox expand and then collapse. Any help would be much appreciated!


14 Jun 2010, 6:17 AM
It's onTriggerClick that does it. If you look at the code, onTrigger1Click references onTriggerClick.