ExtJS ComboBox Replacement

I consider myself to be an expert in ExtJS. However, there is one component that I have to lookup how to use just about every single time I use it: Ext.form.ComboBox. For me, the default implementation just doesn’t cut it. There are a number of problems I have all the time:

Forgetting to set “mode” to remote when I provide a store that is obviously “remote”
Drop-down list width sometimes is smaller than the combo box itself
I hate having to setup a store every time I need a remote ComboBox
After the store loads, the value in the input box is not automatically replaced with displayValue

Maybe these issues are more my issues, but I maintain that ComboBox is one of poorer ExtJS components. Here is my replacement:

Please see the new code here: Update to ComboBox Replacement

Use it like this:

var combo1 = new com.succinctllc.form.ComboBox({
  displayField:'name',
  valueField:'id',
  url:"/path/to/dataSource"
});

var combo1 = new com.succinctllc.form.ComboBox({

displayField:'name',

valueField:'id',

url:"/path/to/dataSource"

});

Edited to set lastQuery properly so ComboBox does not load the store twice when autoLoad is set to true (default).

4 comments

Hi there,

I’m using the “out-of-the-box” ComboBox from extjs, and tend to agree that it’s not put together very nicely.

My problem is that I’m using it to convert a normal select HTML element into a extJS ComboBox element. But I want the default text to be “Select one..”, without having to create an empty select option and using their “emptyText” init var. Would you be able to help with that maybe?

Thanks

This is a really quick fix for you. I think you might try adding a “render” listener in your combo like :

render : function(combo){
combo.clearValue();
}

I think the reason you are having the problem you are having is because html selects always select the first item in the list if nothing is selected. So, Ext doesn’t know that you don’t want that option selected.

Ideally, ExtJS should look at the DOM and check to see if the selected=”true” attribute is set on one of the options. If it isn’t, then it should clear the value.

If you want to write this functionality I would be glad to include it in my combo box replacement code for everyone else to use.

IE 6 returns “true” for the selected attribute for the first item if the selected attribute wasn’t set on any of the options…

I was suggesting using the method getAttribute to figure it out. This is cross platform and works the same. so for instance…

var comboEl = Ext.get(combo); //pretend this points to the combo<br />
var selectedOption = comboEl.first("[selected=true]");

1 2	var comboEl = Ext.get(combo); //pretend this points to the combo<br /> var selectedOption = comboEl.first("[selected=true]");

I think that will work.

Jason Clawson

Code, Projects, Life

ExtJS ComboBox Replacement

4 comments

Leave a Reply Cancel reply