How do I get an extjs combo box to act like a normal, html select box?

extjs, extjs3

Solution

You can get that behaviour just by using the proper configuration when you instantiate the Ext.form.ComboBox object:

var selectStyleComboboxConfig = {
    fieldLabel: 'My Dropdown',
    name: 'type',
    allowBlank: false,
    editable: false,
    // This is the option required for "select"-style behaviour
    triggerAction: 'all',
    typeAhead: false,
    mode: 'local',
    width: 120,
    listWidth: 120,
    hiddenName: 'my_dropdown',
    store: [
        ['val1', 'First Value'],
        ['val2', 'Second Value']
    ],
    readOnly: true
};
var comboBox = new Ext.form.ComboBox(selectStyleComboboxConfig);

Replace the `mode: 'local'` and `store` argument in your case if you'd like it to be bound to a `Ext.data.JsonStore` for example.

Problem

ExtJS provides a fancy combo-box that has lots of features - type ahead, allowing for random text entry, hiding all the entries in the drop-down list that don't star with the text that has already been entered. I don't want these features. I want a select box that behaves pretty much exactly like one would expect a normal select box would in vanilla html. I do want it bound to a data store, and I do want all the other extjs configuration goodies that come with the combo box. I just don't want users/testers freaking out when they encounter a select box that breaks their existing mental paradigm of how these things work. So how can I get an extjs combo box to act more like a select box? Or am I using the wrong widget altogether?

Original source