View Full Version : ComboBox - onClick

16 May 2009, 3:31 PM
I have a ComboBox that is used as a field where the user can type in a search.
Once the search results come back, the ComboBox is expanded and suggestions are shown.

If the user does not want to click on any of the suggestions, he/she should be able to type something into the ComboBox instead.

The only way this is possible is if the user clicks somewhere outside the area of the ComboBox (and the box is collapsed).

Is there an
onClick method or something similar where I can detect that the user has clicked in the typing area of the ComboBox so that I can collapse the suggestions?

Thanks in advance for any info!

17 May 2009, 12:15 AM
Add a click handler to the Element (http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.form.ComboBox&member=getEl)

After it has been rendered obviously.

17 May 2009, 1:16 AM
THis is so common, I've added some info to the docs. With example code:

// Plugin is configured with a listeners config object.
// The Component is appended to the argument list of all handler functions.
Ext.DomObserver = Ext.extend(Object, {
constructor: function(config) {
this.listeners = config.listeners ? config.listeners : config;

init: function(c) {
var p, l = this.listeners;
for (p in l) {
if (Ext.isFunction(l[p])) {
l[p] = this.createHandler(l[p], c);
} else {
l[p].fn = this.createHandler(l[p].fn, c);
c.render = c.render.createSequence(function() {

createHandler: function(fn, c) {
return function(e) {
fn.call(this, e, c);

var combo = new Ext.form.ComboBox({

// Collapse combo when its element is clicked on
plugins: [ new Ext.DomObserver({
click: function(evt, comp) {
store: myStore,
typeAhead: true,
mode: 'local',
triggerAction: 'all'