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

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 disabling those features when you instanciate the Combo object:

{
xtype: 'combo',
fieldLabel: 'My Dropdown',
name: 'type',
allowBlank: false,
editable: false,
triggerAction: 'all',
typeAhead: false,
mode: 'local',
width:120,
listWidth: 120,
hiddenName: 'my_dropdown',
store: [['val1', 'First Value'], ['val2', 'Second Value']],
readOnly: true
}

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.

Answer 2

Did you try typeAhead = false? Not too sure if this is close to what you want.

var combo = new Ext.form.ComboBox({
    typeAhead: false,

    ...

});