Yet another ComboBox with clear button

[wck555]

Several people have posted modifications to the combobox that add a second trigger field that clears the contents of the box. Here's my solution. Include the code below in your project and then use Ext.form.ClearableComboBox in place of Ext.form.ComboBox whenever you want to create a combobox with a clear button. See the attached screen shot to see how it looks.

This code is based on TwinTriggerField in TriggerField.js. I had to add style:'padding-right:2px' to prevent IE from clipping the right edge of the control (If anyone has a better solution please let me know).



// --- A ComboBox with a secondary trigger button that clears the contents of the ComboBox
Ext.form.ClearableComboBox = Ext.extend(Ext.form.ComboBox, {
initComponent : function(){
Ext.form.ClearableComboBox.superclass.initComponent.call(this);

this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', style:'padding-right:2px', // padding needed to prevent IE from clipping 2nd trigger button
cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger"},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"}
]
};
},

getTrigger : function(index){
return this.triggers[index];
},

initTrigger : function(){
var ts = this.trigger.select('.x-form-trigger', true);
this.wrap.setStyle('overflow', 'hidden');
var triggerField = this;
ts.each(function(t, all, index){
t.hide = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = 'none';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
};
t.show = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = '';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
};
var triggerIndex = 'Trigger'+(index+1);

if(this['hide'+triggerIndex]){
t.dom.style.display = 'none';
}
t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
t.addClassOnOver('x-form-trigger-over');
t.addClassOnClick('x-form-trigger-click');
}, this);
this.triggers = ts.elements;
},

onTrigger1Click : function() {this.onTriggerClick()}, // pass to original combobox trigger handler
onTrigger2Click : function() {this.reset()} // clear contents of combobox
});

[jay@moduscreate.com]

smooth!

[galdaka]

CSS + Images?

Suggestion: live exmaple.

Tested in EXT 1.0.1a + IE6 and not work.

Thanks in advance.

[wck555]

CSS + Images?

Suggestion: live exmaple.

Tested in EXT 1.0.1a + IE6 and not work.

Thanks in advance.

Sorry about the confusion. This requires Ext 1.1

No additional CSS or images are required - everything needed is already available in Ext 1.1. Usage is identical to Ext.form.ComboBox. Just use Ext.form.ClearableComboBox in place of Ext.form.ComboBox. All other config options, properties, and functions are the same.

[galdaka]

Thanks, works fine in 1.1. Good work!!

[filepillow]

Hi wck555,

Great job!
Your form looks cool, did you use absolute positioning for the fields?

[nassaja-rus]

For a long time spoke, similar clearCombo it is necessary to include in ext. It is necessary to people

[wck555]

Hi wck555,

Great job!
Your form looks cool, did you use absolute positioning for the fields?

Thanks. I didn't use absolute positioning. I lined up everything using containers and columns with careful use of field widths and labels width. The label width is programable for each column. You can also show/hide labels independently for each column. Below is an extract of the code that defines the form. The sample has external dependencies so it won't run on its own, but it should show you how I got everything to line up.



this.form = new Ext.form.Form();
this.form.container({hideLabels:true}, new Ext.form.Field({autoCreate:{tag: 'div', html: '', cls:'form-spacer', style:'height:5px'}, value: '' }));
this.form.container()
this.form.column({width:340, labelWidth:60, labelAlign: 'right'},
new Ext.form.ComboBox({
fieldLabel: 'Report',
hiddenName: 'ReportID',
displayField: 'text',
valueField: 'id',
width:250,
forceSelection: true,
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Select a Report...',
selectOnFocus:true,
store: new Ext.data.SimpleStore({ fields: ['id', 'text'], data: reportList })
}),
new Ext.form.ComboBox({
fieldLabel: 'Sort By',
hiddenName: 'SortBy',
displayField: 'text',
width:150,
forceSelection: true,
typeAhead:true,
mode:'local',
triggerAction:'all',
selectOnFocus:true,
value: 'Date',
disabled: true,
store: new Ext.data.SimpleStore({ fields: ['text'], data: sortByList })
}));
this.form.column({width:170, hideLabels:true},
// === Hide Phyisican Blind Code ===
new Ext.form.Checkbox({
boxLabel: 'Hide Physician DO/MD#',
name: 'HideMD' // name of field bound to this control
}),
// === Hide Manager Followup ===
new Ext.form.Checkbox({
boxLabel: 'Hide Manager Follow Up',
name: 'HideMFU' // name of field bound to this control
}));
this.form.column({width:130, hideLabels:true},
// === Hide Patient ID# ===
new Ext.form.Checkbox({
boxLabel: 'Hide Patient ID#',
name: 'HideMR' // name of field bound to this control
}));
this.form.end(); // end of container

this.form.fieldset({ labelAlign: 'right', legend:'Include in Report'});
this.form.container();
this.form.column({width:175, labelWidth:70},
// === Occurrence Date ===
new Ext.form.DateField({
fieldLabel: 'Dates',
name: 'StartDate',
format: 'n/j/Y',
width:95,
invalidText: 'Enter date as MM/DD/YYYY'
}));
this.form.column({width:130, labelWidth:25},
// === Entry Date ===
new Ext.form.DateField({
fieldLabel: 'To',
name: 'EndDate',
format: 'n/j/Y',
width:95,
invalidText: 'Enter date as MM/DD/YYYY'
}));
this.form.column({width:320, labelWidth:110},
// === Area of Occurrence ===
new Ext.form.ClearableComboBox({
fieldLabel: 'Occurrence Area',
hiddenName: 'OccurrenceAreaID',
emptyText: '(All Occurrence Areas)',
displayField: 'text',
valueField: 'id',
width:200,
forceSelection: true,
typeAhead:true,
mode:'local',
triggerAction:'all',
selectOnFocus:true,
store: new Ext.data.SimpleStore({ fields: ['id', 'text'], data: occurrenceAreaLookup })
}));
this.form.end(); // end of container
this.form.container();
this.form.column({width:400, labelWidth:70},
// === Event Type
new Ext.form.ClearableComboBox({
fieldLabel: 'Event Type',
hiddenName: 'EventTypeID',
emptyText: '(All Events)',
displayField: 'text',
valueField: 'id',
width:320,
forceSelection: true,
typeAhead:true,
mode:'local',
triggerAction:'all',
selectOnFocus:true,
store: new Ext.data.SimpleStore({ fields: ['id', 'text'], data: eventTypeLookup })
}));
this.form.column({width:225, labelWidth:70},
// === Outcome ===
new Ext.form.ClearableComboBox({
fieldLabel: 'Outcome',
hiddenName: 'OutcomeID',
emptyText: '(All Outcomes)',
displayField: 'text',
valueField: 'id',
width:145,
forceSelection: true,
typeAhead:true,
mode:'local',
triggerAction:'all',
selectOnFocus:true,
store: new Ext.data.SimpleStore({ fields: ['id', 'text'], data: outcomeLookup })
}));
this.form.end(); // end of container
this.form.container();
this.form.column({width:300, labelWidth:70},
// === Medication ===
new Ext.form.ClearableComboBox({
fieldLabel: 'Medication',
hiddenName: 'Medication',
displayField: 'text',
emptyText: '(All Medications)',
width:220,
pageSize: 20,
queryDelay: 10,
minChars: 2,
typeAhead:false,
mode:'remote',
triggerAction:'all',
selectOnFocus:true,
forceSelection: false,
store: this.dsMedLookup
}));
this.form.column({width:325, labelWidth:140},
// === Data Entry Personnel ===
new Ext.form.ClearableComboBox({
fieldLabel: 'Data Entry Personnel',
hiddenName: 'UserID',
emptyText: '(All Personnel)',
displayField: 'text',
valueField: 'id',
width:175,
listWidth: 200,
forceSelection: true,
typeAhead:true,
mode:'local',
triggerAction:'all',
selectOnFocus:true,
store: new Ext.data.SimpleStore({ fields: ['id', 'text'], data: userLookup })
}));
this.form.end(); // end of container
this.form.end(); // end of fieldset

[filepillow]

Hi wck555,
Thanks for sharing :)

[andrei.neculau]

(:|One small glitch: visual problem when it is used inside a toolbar. The trigger fields are not positioned correctly due to position:static, but I couldn't figure out the solution.

[wck555]

(:|One small glitch: visual problem when it is used inside a toolbar. The trigger fields are not positioned correctly due to position:static, but I couldn't figure out the solution.

I just tested the clearable combobox in a toolbar using IE6, Firefox2, and Safari2. They all are rendering the control correctly for me. I am using RC1 of Ext 1.1 Have you tried a standard combobox in the toolbar. Does it exhibit the same problem?

[andrei.neculau]

Easier solution?!
Maybe this one of my own: http://extjs.com/forum/showthread.php?p=51732#post51732

PS:It my not be easier, but actually I have been having problems with the twin triggers not being rendered correctly here and there, so... I had to come up with something else.

[fangzhouxing]

Hi,wck555,
Thanks for your great job.

[Grimsk]

good job .. i was looking this feature

[HeathT]

Great mod and thanks for sharing!

=D>

[galdaka]

Hi,

I combined your code with HistoryCombobox.js for create HistoryClearableCombobox.js.


Ext.form.HistoryClearableComboBox = function(config) {

Ext.form.HistoryClearableComboBox.superclass.constructor.call(this, config);

this.addEvents({
'change' : true
});

this.store = new Ext.data.SimpleStore({
fields: ['query'],
data: []
});

this.historyRecord = Ext.data.Record.create([
{name: 'query', type: 'string'}
]);

this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', style:'padding-right:2px', // padding needed to prevent IE from clipping 2nd trigger button
cn:[{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger", style:config.hideComboTrigger?"display:none":""},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger", style: config.hideClearTrigger?"display:none":""}
]};
};

Ext.extend(Ext.form.HistoryClearableComboBox, Ext.form.ComboBox, {
store: undefined,
displayField: 'query',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
hideTrigger: false,

historyRecord: undefined,
maxInHistory: 10,
rememberOn: 'enter',



getTrigger : function(index){
return this.triggers[index];
},

initTrigger : function(){
var ts = this.trigger.select('.x-form-trigger', true);
this.wrap.setStyle('overflow', 'hidden');
var triggerField = this;
ts.each(function(t, all, index){
t.hide = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = 'none';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
};
t.show = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = '';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
};
var triggerIndex = 'Trigger'+(index+1);

if(this['hide'+triggerIndex]){
t.dom.style.display = 'none';
}
t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
t.addClassOnOver('x-form-trigger-over');
t.addClassOnClick('x-form-trigger-click');
}, this);
this.triggers = ts.elements;
},

onTrigger1Click : function() {this.onTriggerClick()}, // pass to original combobox trigger handler

onTrigger2Click : function() {this.reset()}, // clear contents of combobox

onRender: function(ct) {
Ext.form.HistoryClearableComboBox.superclass.onRender.call(this, ct);
},

initEvents : function() {
Ext.form.HistoryClearableComboBox.superclass.initEvents.call(this);

this.el.on("keyup", this.onHistoryKeyUp, this);
},

historyChange : function(value) {
var value = this.getValue().replace(/^\s+|\s+$/g, "");
if (value.length==0)
return;
this.store.clearFilter();
var vr_insert = true;
if (this.rememberOn=="all") {
this.store.each(function(r) {
if (r.data['query'].indexOf(value)==0) {
// backspace
vr_insert = false;
return false;
} else if (value.indexOf(r.data['query'])==0) {
// forward typing
this.store.remove(r);
}
});
}
if (vr_insert==true) {
this.store.each(function(r) {
if (r.data['query']==value) {
vr_insert = false;
}
});
}
if (vr_insert==true) {
var vr = new this.historyRecord({query: value});
this.store.insert(0, vr);
}
var ss_max = this.maxInHistory;
if (this.store.getCount()>ss_max) {
var ssc = this.store.getCount();
var overflow = this.store.getRange(ssc-(ssc-ss_max), ssc);
for (var i=0; i<overflow.length; i++) {
this.store.remove(overflow[i]);
}
}
},

onHistoryKeyUp : function(e) {
if ( (this.rememberOn=="enter" && e.getKey()==13) ||
(this.rememberOn=="all") ) {
this.historyChange(this.getValue());
this.fireEvent('change', this.getValue());
}
},

setValue : function(v) {
Ext.form.HistoryClearableComboBox.superclass.setValue.call(this, v);
this.fireEvent('change', this.getValue());
},

clearValue : function() {
this.setValue("");
},

EOJ : function(){}
});

With hideComboTrigger and hideClearTrigger parameters display or hidden triggers. This works fine for me (http://extjs.com/forum/attachment.php?attachmentid=1517&d=1188303243).


But I have a problem when I trying to create thrid trigger like this:


....
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-search-trigger", style: config.hideSearchTrigger?"display:none":""}
....

But the third trigger image appears wrong, see image.

Thanks in advance,

[HeathT]

I believe search should be clear.



{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-search-trigger", style: config.hideSearchTrigger?"display:none":""}
....



-HT


...

But I have a problem when I trying to create thrid trigger like this:

...

But the third trigger image appears wrong, see image.

Thanks in advance,

[galdaka]

I believe search should be clear.



{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-search-trigger", style: config.hideSearchTrigger?"display:none":""}
....



-HT

Thanks but this is not the problem. I will try to put a live example soon. ;)

[galdaka]

Solved,

three or more triggers. See image.

I put the extension in ux format: http://extjs.com/forum/showthread.php?t=12030

[Comma]

Really cute, dude ) Can you advice how to add checkbox like existing clear button to your combox for disable / enable the combobox?

[ziesemer]

This is great, and would be nice if it gets included in an official Ext release at some point.

2 suggestions:


The regular non-extended ComboBox is keyboard accessible. There doesn't seem to be any way to trigger the reset by the keyboard without adding your own key listener, at least not that I could find. It'd be nice to do something like this by default, or at least provide a config option to make it easier to do by default.
Unfortunately, there doesn't seem to be any "reset" listener. It was probably never missed as the only way to reset without an extension like this is by code. Unfortunately, neither the change or select listeners fire when the value is reset. Adding a "reset" listener into the base class would be ideal, but maybe that could also be added in here for now?

[fangzhouxing]

Hi wck555, thanks for your great work.

When I used it in Ext 2.0 toolbar of a grid in Web Desktop Window, the combobox cannot display. When I used it in Ext 2.0 toolbar of a grid in normal TabPanel, it is ok.

Can you help me ? Thanks in advance.

[wck555]

I am still using Ext 1.1 so I don't know how/if the control works in Ext 2.0 (sorry) When I switch to 2.0 I will post any findings here.


Hi wck555, thanks for your great work.

When I used it in Ext 2.0 toolbar of a grid in Web Desktop Window, the combobox cannot display. When I used it in Ext 2.0 toolbar of a grid in normal TabPanel, it is ok.

Can you help me ? Thanks in advance.

[jit]

Just wondered if anyone had a solution that worked with Ext 2.

Thanks

- Jit


Edit: This does the trick: http://extjs.com/forum/showthread.php?p=232225#post232225

[iBeb]

I've made some changes to your helpfull code :
- I've add the event "reset"
- and fire this event
This way, you can do "something" as submitting the form (usefull for a "filter" form)


// --- A ComboBox with a secondary trigger button that clears the contents of the ComboBox
Ext.form.ClearableComboBox = Ext.extend(Ext.form.ComboBox, {
initComponent : function(){
this.addEvents('reset');
[...]
},
[...]
onTrigger2Click : function() {this.reset();this.fireEvent('reset',this)} // clear contents of combobox
});
_bertrand

[wck555]

I updated ClearableComboBox to work with Ext 2 and Ext 3. The original ClearableComboBox works in Ext 2, but this version is simpler and should be more compatible going forwards. It's based on Animal's TwinCombo example: http://extjs.com/forum/showthread.php?p=232225#post232225


// --- A ComboBox with a secondary trigger button that clears the contents of the ComboBox
Ext.form.ClearableComboBox = 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"},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"}
]};
Ext.form.ClearableComboBox.superclass.initComponent.call(this);
},
onTrigger2Click : function()
{
this.collapse();
this.reset(); // clear contents of combobox
this.fireEvent('cleared'); // send notification that contents have been cleared
},

getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
trigger1Class: Ext.form.ComboBox.prototype.triggerClass
});

[bramvano]

Nice! Thanks a lot!

[Max_1]

Several people have posted modifications to the combobox that add a second trigger field that clears the contents of the box. Here's my solution. Include the code below in your project and then use Ext.form.ClearableComboBox in place of Ext.form.ComboBox whenever you want to create a combobox with a clear button. See the attached screen shot to see how it looks.

This code is based on TwinTriggerField in TriggerField.js. I had to add style:'padding-right:2px' to prevent IE from clipping the right edge of the control (If anyone has a better solution please let me know).



// --- A ComboBox with a secondary trigger button that clears the contents of the ComboBox
Ext.form.ClearableComboBox = Ext.extend(Ext.form.ComboBox, {
initComponent : function(){
Ext.form.ClearableComboBox.superclass.initComponent.call(this);

this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', style:'padding-right:2px', // padding needed to prevent IE from clipping 2nd trigger button
cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger"},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"}
]
};
},

getTrigger : function(index){
return this.triggers[index];
},

initTrigger : function(){
var ts = this.trigger.select('.x-form-trigger', true);
this.wrap.setStyle('overflow', 'hidden');
var triggerField = this;
ts.each(function(t, all, index){
t.hide = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = 'none';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
};
t.show = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = '';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
};
var triggerIndex = 'Trigger'+(index+1);

if(this['hide'+triggerIndex]){
t.dom.style.display = 'none';
}
t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
t.addClassOnOver('x-form-trigger-over');
t.addClassOnClick('x-form-trigger-click');
}, this);
this.triggers = ts.elements;
},

onTrigger1Click : function() {this.onTriggerClick()}, // pass to original combobox trigger handler
onTrigger2Click : function() {this.reset()} // clear contents of combobox
});

Thanks a lot! Thats what I've been looking for!

[Stju]

I think, that clear button should go before usual dropdown trigger(rounded top right corner!), because it's fully rounded. See attached image.
Works with Ext 3.1.1


// --- Variation of ComboBox where first button is clear, instead of second to clear value of the ComboBox

Ext.form.ClearableComboBox = 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 x-form-clear-trigger"},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger"}
]};
Ext.form.ClearableComboBox.superclass.initComponent.call(this);
},
onTrigger1Click : function()
{
this.collapse();
this.reset(); // clear contents of combobox
this.fireEvent('cleared'); // send notification that contents have been cleared
},

getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
onTrigger2Click: Ext.form.ComboBox.prototype.onTriggerClick,
trigger1Class: Ext.form.ComboBox.prototype.triggerClass,
trigger2Class: Ext.form.ComboBox.prototype.triggerClass
});
Ext.reg('clearcombo', Ext.form.ClearableComboBox);
Stju

[SimoAmi]

I agree with the above post. I usually see the clear button before the trigger tip.

And here's another idea for styling:

[wck555]

Very nice! Do you have a functional version? Now that I see that idea, what would be really slick is to have the "x" appear only when there is text in the box - like the spotlight search boxes work in OS X.

[SimoAmi]

I can't share the code because of an NDA but I've attached the sprite for mouse over and mouse out, spaced out 16 pixels each.

Hope it helps.

[gregoire]

Nice!

[Gonfi]

thanks for the code. i'm using the version from Stju with the following modification:

i have a problem with this:
this.reset(); // clear contents of combobox
this.fireEvent('cleared'); // send notification that contents have been cleared

reset does not clear the value. instead, it resets the value to the INITIAL value, the 'value' config option. i assume you do not use that.
because that ext component (just like others) lacks a clear method i use setValue('').
and instead of firing a new event ('cleared') i do fire the already available one called 'change'.

so here goes my onTrigger1Click:


onTrigger1Click : function()
{
var oldValue = this.getValue();
this.collapse();
this.setValue('');
this.fireEvent('change', this, '', oldValue);
},

it has the following side effect: the change event is fired twice; once when the clear button is clicked, and once more when the field loses focus.
this is different to the behavior when the user manually removes the content of the field. then no change event is fired until the user leaves the field. (i would prefer an instant event)
imo the component should not fire anymore on blur. it seems that setValue('') does not change the value internally.
anyway i prefer 2 over not getting instant feedback to a user interaction.

[Grolubao]

I'm having a problem that when I click the clear it clears the content, but I need to lose focus on the combobox in order to the emptytext to show again.

Does somebody have a solution for this?

The solution is:

combo.triggerBlur.defer(50,combo);