How to auto select (show) the first value of combobox in Ext Js?

Question

This is my combobox

{
    xtype: 'combo', 
    fieldLabel: LANG.LOGIN_LANG,
    id : 'lang', 
    store: [
        ['tr','Türkçe'],
        ['ru','Русский'],
        ['en','English']
    ],
    mode: 'local',
    triggerAction: 'all',
    selectOnFocus:true
},

is store loaded before combobox creation or store is loaded afterwards? in given example satish kumar's answer is your solution... — Zango, Jul 15 '11 at 14:08

score 31 · Answer 1 · answered Jul 15 '11 at 15:21

Generally, when I want to select the first value of a store, I use this methods:

xtype: 'combo', 
fieldLabel: 'prov',
id : 'lang', 
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
listeners: {
    afterrender: function(combo) {
        var recordSelected = combo.getStore().getAt(0);                     
        combo.setValue(recordSelected.get('field1'));
    }
}

score 23 · Accepted Answer · answered Jul 15 '11 at 09:36

{
  xtype: 'combo', 
  fieldLabel: LANG.LOGIN_LANG,
  id : 'lang', 
  store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
  mode: 'local',
  triggerAction: 'all',
  value: 'tr',
  selectOnFocus:true
},

For remote comboboxes you need to plug into store's load event to select the value after store is loaded.

score 12 · Answer 3 · edited Oct 09 '13 at 03:04

12

You can use the value property like so:

value : 'tr'

then it will display first value by default.

edited Oct 09 '13 at 03:04

Meredith

3,928
4
33
58

answered Jul 15 '11 at 09:26

satish kumar

145
4

score 0 · Answer 4 · answered Dec 08 '15 at 09:57

You can use this code, assigning any store element after its id to the default combobox value.

{ 
  xtype: 'combobox',
  forceSelection: true,
  allowBlank: true,
  typeAhead: true,
  queryMode: 'local',
  colspan: 3,
  id: 'filter_column_c',
  style: {'margin': '5px 15px 15px 30px'},
  fieldLabel: 'Column',
  valueField: 'column',
  displayField: 'name',
  store: nomStores["storeCombo"],
  value: nomStores["storeCombo"].getById(1),
},

score -1 · Answer 5 · answered May 29 '18 at 09:44

As an alternative, I faced the need to show a locally stored Store, which was just a matter of listening the afterRender method:

listeners: {
    afterRender: function() {
        this.select(01);
    }
}

01 in this case is the id (valueField) of the element in the Store:

areasCenters: {
        data: [{
                id: 01,
                name: 'Todas'
            },
            {
                id: 02,
                name: 'Elegir...'
            }
        ],
        autoLoad: true
}

How to auto select (show) the first value of combobox in Ext Js?

5 Answers5