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?

score 32 · Accepted Answer · edited Oct 24 '13 at 14:31

32

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.

edited Oct 24 '13 at 14:31

blong

2,815
8
44
110

answered Jan 20 '10 at 15:54

loginx

1,112
9
9

2

Thanks - I'd found some of those, but it was "triggerAction: 'all'" that was the important one I was missing. Without that, the drop down hides all the items other than the one that was selected. – Spike Williams Jan 20 '10 at 16:20
6

Looks like this is for ExtJS3. Here're changes for Ext4: `triggerAction` is 'all' by default; `typeAhead` is removed `mode` renamed to `queryMode` – kirilloid Oct 30 '12 at 13:22

score 7 · Answer 2 · answered Mar 24 '11 at 16:20

The currently accepted solution works great, but if anyone wants a ComboBox that also handles keyboard input like a plain HTML select box (e.g., each time you press "P" is selects the next item in the list beginning with "P"), the following might be helpful:

{
    xtype: 'combo',
    fieldLabel: 'Price',
    name: 'price',
    hiddenName: 'my_dropdown',
    autoSelect: false,
    allowBlank: false,
    editable: false,
    triggerAction: 'all',
    typeAhead: true,
    width:120,
    listWidth: 120,
    enableKeyEvents: true,
    mode: 'local',
    store: [
        ['val1', 'Appaloosa'],
        ['val2', 'Arabian'],
        ['val3', 'Clydesdale'],
        ['val4', 'Paint'],
        ['val5', 'Palamino'],
        ['val6', 'Quarterhorse'],
    ],
    listeners: {
        keypress: function(comboBoxObj, keyEventObj) {
            // Ext.Store names anonymous fields (like in array above) "field1", "field2", etc.
            var valueFieldName = "field1";
            var displayFieldName = "field2";

            // Which drop-down item is already selected (if any)?
            var selectedIndices = this.view.getSelectedIndexes();
            var currentSelectedIndex = (selectedIndices.length > 0) ? selectedIndices[0] : null;

            // Prepare the search criteria we'll use to query the data store
            var typedChar = String.fromCharCode(keyEventObj.getCharCode());
            var startIndex = (currentSelectedIndex == null) ? 0 : ++currentSelectedIndex;

            var matchIndex = this.store.find(displayFieldName, typedChar, startIndex, false);

            if( matchIndex >= 0 ) {
                this.select(matchIndex);
            } else if (matchIndex == -1 && startIndex > 0) {
                // If nothing matched but we didn't start the search at the beginning of the list
                // (because the user already had somethign selected), search again from beginning.
                matchIndex = this.store.find(displayFieldName, typedChar, 0, false);                                
                if( matchIndex >= 0 ) {
                    this.select(matchIndex);
                }
            }

            if( matchIndex >= 0 ) {
                var record = this.store.getAt(matchIndex);
                this.setValue(record.get(valueFieldName));
            }
        }
    }
}

It took me a long time for finding this solution and it is the only one that actually works (in Ext 2.3.0)! Thanks! — Ivo Limmen, May 17 '12 at 20:47

score 2 · Answer 3 · answered Jan 20 '10 at 15:55

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,

    ...

});

answered Jan 20 '10 at 15:55

aDev

314
2
5

score 2 · Answer 4 · answered Nov 04 '10 at 10:51

2

var buf = []; 
buf.push('<option>aA1</option>');
buf.push('<option>aA2</option>');
buf.push('<option>bA3</option>');
buf.push('<option>cA4</option>');

var items = buf.join('');
new Ext.Component({
    renderTo: Ext.getBody(),
    autoEl: {
         tag:'select',
         cls:'x-font-select',
         html: items
    }
 });

answered Nov 04 '10 at 10:51

Kristian

2,071
23
15

Thanks, I wanted a way to create a real `select` tab, I succeeded this way. – Emmanuel Jun 25 '13 at 09:30

score -3 · Answer 5 · answered Jul 04 '13 at 00:00

-3

Just use Ext.merge function

From the doc: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-merge

answered Jul 04 '13 at 00:00

vampolo

107
1
4

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

5 Answers5