Question

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?

Answer 1

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.