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