ExtJS 4.1 Come selezionare prima voce combo

Question

Ho un combo sembrare http://jsfiddle.net/Q5nNV/

tutto va bene, ma quando cerco (battitura) del testo come asdf alla casella combinata e fare clic su Cancella pulsante

che non è selezionare prima voce, sembrare

Ecco il mio codice

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() 
}); 

voglio quando clicco il tasto chiaro il mio combo selezionerà primo elemento (elemento vuoto). Come risolvere che grazie

Answer 1

Questo dovrebbe fare il trucco. Che, fondamentalmente, necessario selezionare il primo valore, fare ri-query in modo che possa cancellare il filtro e quindi inviare a fuoco di nuovo al campo (opzionale):

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() 
    }); 
}); 

Ovviamente, la ri-query e messa a fuoco sono opzionali . Potresti facilmente rimuoverli da questo codice.

In alternativa, è possibile utilizzare this.select(this.getStore().getAt(0)); e quindi fare this.blur() per selezionarlo e quindi eliminare immediatamente l'elenco non popolato.

Answer 2

questo funziona per me

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

Answer 3

questo è un lavoro per me ....

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

quando la casella combinata non è carico, il selezionare non funziona. Prima di caricare, quindi selezionare.