Extjs 4.1 How to select the first item in combo

Question

I have a combined view of http://jsfiddle.net/Q5nNV/

everything is fine, but when I search for (typing) text, such as asdf , in the combo box and click the clear button

In order not to select the first element, it looks like

Here is my code

 var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data : [ {"abbr":"AK", "name":""}, {"abbr":"AL", "name":"Alabama"}, {"abbr":"AZ", "name":"Arizona"} ] }); // Create the combo box, attached to the states data store var combo = Ext.create('Ext.form.ComboBox', { fieldLabel: 'Choose State', store: states, triggerAction: 'all', value: "AK", queryMode: 'local', displayField: 'name', valueField: 'abbr', trigger2Cls: 'x-form-clear-trigger', onTrigger2Click: function (args) { this.setValue("AK"); }, tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + '{name}' + '</li></tpl>'), renderTo: Ext.getBody() }); 

I want, when I press the "Clear" button, my combo will select the first element (empty element). How to fix it, thanks

Answer 1

That should do the trick. You basically need to select the first value, make the request again so that it can clear the filter, and then send focus back to the field (optional):

 Ext.onReady(function () { // The data store containing the list of states var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data : [ {"abbr":"AK", "name":""}, {"abbr":"AL", "name":"Alabama"}, {"abbr":"AZ", "name":"Arizona"} ] }); // Create the combo box, attached to the states data store var combo = Ext.create('Ext.form.ComboBox', { fieldLabel: 'Choose State', store: states, triggerAction: 'all', queryMode: 'local', displayField: 'name', valueField: 'abbr', trigger2Cls: 'x-form-clear-trigger', enableKeyEvents: true, onTrigger2Click: function (args) { // Select the first record in the store this.select(this.getStore().getAt(0)); // Force a re-query to clear the filter this.doQuery(); // Send focus back to the field this.focus(); }, tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + '{name}' + '</li></tpl>'), renderTo: Ext.getBody() }); }); 

Obviously, retrying and focus are optional. You can easily remove them from this code.

Alternatively, you can use this.select(this.getStore().getAt(0)); and then do this.blur() to select it, and then get rid of the unvisited list immediately.

Answer 2

it works for me

 var combo = Ext.getCmp('myId'); combo.select(combo.getStore().getAt(0)); 

Answer 3

this is work for me ....

  var cmbESTADO = component.query('#cmbESTADO')[0]; cmbESTADO.store.load(function(st){ cmbESTADO.select(cmbESTADO.getStore().getAt(0)); }); 

when the combo box does not load, the selection does not work. Before downloading and then select.