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:

  1. Forgetting to set “mode” to remote when I provide a store that is obviously “remote”
  2. Drop-down list width sometimes is smaller than the combo box itself
  3. I hate having to setup a store every time I need a remote ComboBox
  4. 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:

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


  1. 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?


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

    render : function(combo){

    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.

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

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

    I think that will work.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">