2013-08-01 2 views
6

У меня есть комбо выглядеть http://jsfiddle.net/Q5nNV/Extjs 4.1 Как выбрать первый элемент в комбо

enter image description here

все хорошо, но когда я искать (печатать) какой-нибудь текст, как asdf в поле со списком и нажмите ясно кнопка

это не выбрать первый пункт, это выглядит как

enter image description here

Вот мой код

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

Я хочу, чтобы, когда я нажмите кнопку Очистить мое комбо будет выбрать первый пункт (пустой пункт). Как исправить это, спасибо

ответ

6

Это должно сделать трюк. Вы в основном должны выбрать первое значение, сделать его повторно запрос таким образом, что он может очистить фильтр, а затем отправить фокус обратно в поле (по желанию):

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

Очевидно, что повторный запрос и фокус не являются обязательными , Вы можете легко удалить их из этого кода.

В качестве альтернативы вы можете использовать this.select(this.getStore().getAt(0));, а затем сделать this.blur(), чтобы выбрать его, а затем немедленно избавиться от незаселенного списка.

+0

Да, спасибо, это хорошо – freestyle

14

это работает для меня

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

это работа для меня ....

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

когда выпадающий не загружается, выберите не работает. Перед загрузкой и затем выберите.

+0

Прокомментируйте ваш код. – Beppe

Смежные вопросы