ExtJS combobox acting like regular select

Question

I try to use ComboBox on FormPanel, it is defined like this:

{
    xtype: 'combo',
    name: 'Reasons',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: ['myId', 'displayText'],
        data: [
            [1, 'Reason 1'],
            [2, 'Second Reason'],
            [3, 'Something else']
        ]
    }),
    typeAhead: false,
    mode: 'local',
    valueField: 'myId',
    displayField: 'displayText',
    allowBlank: false,
    editable: false,
    forceSelection: true
}

I would like to act like a ordinary select element, when I have editable as false I not able to re-select anymore, when as true ( default ) I need to remove selection ( by backspace or delete ) in order to re-select.

What else I should turn off in order to downgrade combobox to select or shpuld I consider to use other component instead ?

My concern is if I really need ordinary select (not quite ordinary - ability to have store and manipulate options is very cool) - combo seems to me next level element what got too many features which I need to turn off and combo is rendered as input with arrow down image what trigger all action.

---

My question is:

Is it ExtJS element what is using HTML select tag, acting as select, rendering as select ?

Answer 1

The trick is to use triggerAction: 'all' - it forces the combo dropdown to show all items when you click the down-arrow icon (trigger).

That's probably the most counter-intuitive config option of ExtJS. And it's impossible to figure out what it really does by reading the docs. And like you say, to get a simple combo, you have to specify a myriad of config options, just to turn the fancy stuff off.

The ExtJS guys have promised to fix this in ExtJS 4, but until then I suggest you create your own ComboBox class that's configured the way most often needed in your app. For example I have something like this in my current project:

/**
 * Simple combo, that just allows to choose from a list of values.
 */
var StaticComboBox = Ext.extend(Ext.form.ComboBox, {
    mode: 'local',
    triggerAction: 'all',
    editable: false,
    valueField: 'value',
    displayField: 'label',
    /**
     * @cfg {[[String]]} data
     * Items in combobox as array of value-label pairs.
     */
    data: [],

    initComponent: function() {
        this.store = new Ext.data.ArrayStore({
            fields: ['value', 'label'],
            data: this.data
        });
        StaticComboBox.superclass.initComponent.call(this);
    }
});

Having that, I can create a simple combo with just a few lines:

new StaticComboBox({
    name: 'Reasons',
    data: [
        [1, 'Reason 1'],
        [2, 'Second Reason'],
        [3, 'Something else']
    ]
});