PDA

View Full Version : Feature Request: Clearable ComboBox



ziesemer
14 Sep 2007, 7:55 AM
Please consider adding built-in support for a "clearable" ComboBox in a future release.

I'm currently using wck555's original "ClearableComboBox" as shown at http://extjs.com/forum/showthread.php?t=9619. If built-in to Ext, a simple "clearable" config option could be used to the current ComboBox rather than an extension class.

(Other versions are shown/linked later in the thread, including with history support, but at the apparent expense of additional complexities and size. "Clearable" support is simple, often requested, and somewhat necessary to get a ComboBox back to its initial state after page load by the user.)

(I'm somewhat disappointed that the only "official" way for making these requests is as an Ext Premium Subscription member. I definitely agree that requests by premium members should have higher priority, but I think a way to track and vote upon all feature requests would be beneficial to everyone.)

jit
1 Oct 2008, 2:50 AM
I'd love to see this functionality in the standard combo component too!

Animal
1 Oct 2008, 5:04 AM
You mean an extra trigger on the end which clears the Combo's Store?

Animal
1 Oct 2008, 5:06 AM
We have a TwinTriggerCombo class, and you can use the second trigger to do anything you want. Just configure it with trigger2Class: 'class that gives it an image' and onTrigger2Click: funcToCall



Ext.ux.TwinTriggerCombo = Ext.extend(Ext.form.ComboBox, {
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}
]};
this.onTrigger2Click = this.onTrigger2Click.createInterceptor(function() {
this.collapse();
});
Ext.ux.TwinTriggerCombo.superclass.initComponent.call(this);
},
getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
trigger1Class: Ext.form.ComboBox.prototype.triggerClass
});

jit
1 Oct 2008, 5:18 AM
Thanks Animal, that's exactly what I'm after.

- Jit

jay@moduscreate.com
1 Oct 2008, 6:45 AM
Thanks Animal, that's exactly what I'm after.

- Jit
This was covered a lot around here.

samadhi
10 Aug 2009, 9:16 AM
Animal, thank you for your extension, but it still has one problem.

If it combotrigger is placed in collapsed fieldsed or panel it doesn't shows on panel expand.

Here is test code:



Ext.ux.TwinTriggerCombo = Ext.extend(Ext.form.ComboBox, {
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}
]};
this.onTrigger2Click = this.onTrigger2Click.createInterceptor(function() {
this.collapse();
});
Ext.ux.TwinTriggerCombo.superclass.initComponent.call(this);
},
getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
trigger1Class: Ext.form.ComboBox.prototype.triggerClass
});

Ext.reg('combotrigger',Ext.ux.TwinTriggerCombo);

fields= [
{
xtype:'combo',
fieldLabel:'combo'
}, {
xtype:'combotrigger',
fieldLabel:'twincombo',
onTrigger2Click: function() {}

}
]

Ext.onReady(function() {
new Ext.FormPanel ({
renderTo: Ext.get('catalog_div'),
items: [{
xtype:'fieldset',
collapsible:true,
title:'collapsible fieldset',
collapsed:true,
height:100,
items:fields
}]
})
});


After fieldset expanding I see only combobox, but triggerfield is not displayed.

Screenshot:
http://ticket-group.ru/combo.gif

Animal
10 Aug 2009, 9:36 AM
That's a well known problem with ComboBoxes.

I think there's a workaround in SVN, but here's another. Put this code before the definition of TwinTriggerCombo



// Temporarily ensure that the passed element (and all ancestors)
// is display:block for the calling of the specified function
function ensureLayout(elm, func, scope) {
var r,
e = Ext.get(elm),
elmStyle = elm.style,
oldDisp = elmStyle.display,
wasXHidden = e.hasClass('x-hide-display');

if (wasXHidden) {
e.removeClass('x-hide-display');
}
elmStyle.display = "block";
if (!elm.offsetWidth) {
r = ensureLayout(elm.parentNode, func, scope);
} else {
r = func.call(scope || window);
}
elmStyle.display = oldDisp;
if (wasXHidden) {
e.addClass('x-hide-display');
}
return r;
}

Ext.override(Ext.form.TriggerField, {
onResize : function(w, h){
ensureLayout(this.wrap.dom, function() {
Ext.form.TriggerField.superclass.onResize.call(this, w, h);
var tw = this.trigger.getWidth();
if(typeof w == 'number'){
this.el.setWidth(this.adjustWidth('input', w - tw));
}
this.wrap.setWidth(w);
}, this);
}
});

samadhi
10 Aug 2009, 10:38 AM
Animal, I put your code in front of my example..
It didn't help.

Btw, I am using Ext 2.3, maybe it is already fixed in 3.0 , I didn't checked.

My final application have too many compatibility issues with 3.0, so I decided not to migrate now.

I also found that doing syncSize() for all twintrigger combos in expand event forces them to display. But it is not the accurate solution..

jay@moduscreate.com
11 Aug 2009, 5:39 AM
Please do not post polls for a feature request.

tryanDLS
11 Aug 2009, 6:16 AM
Moved to Help.

SUPER_X
26 Oct 2009, 8:27 AM
And if I wan to change trigger2Class, how should I build it?

Are there any prebuilt examples? Like a go or a clear button or something. Even if I need to provide an image, I don't understand how this is so meaningless to the point of not even being mentioned.

Jangla
3 Aug 2010, 5:02 AM
Anyone noticed any odd behaviour on these twin trigger combos when populating them from a JsonStore? Specifically I'm talking about differences between this and a normal combo i.e. a normal combo would load the store on page load and work perfectly. Whenever I use one of these, the store seems to load once on page load and then once again on dropping the combo box down. In addition, this second data retrieval ignores all params called originally on the store.

Edit :

Fixed.

Changed this line:


Ext.ux.TwinTriggerCombo.superclass.initComponent.call(this);


to this:



Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.ux.TwinTriggerCombo.superclass.initComponent.apply(this, arguments);