Extjs 4.1如何选择组合中的第一项

Question

我的组合看起来像http://jsfiddle.net/Q5nNV/

一切都很好,但当我搜索(键入)一些文本,如asdf组合框,然后单击清除按钮

这不是选择第一项,它看起来像

这是我的代码

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

我想当我点击清除按钮时,我的组合将选择第一项(空项).如何解决这个问题

Answer 1

这对我有用

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

Answer 2

这应该可以解决问题.你基本上需要选择第一个值,让它重新查询,以便它可以清除过滤器,然后将焦点发送回字段(可选):

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()选择它然后立即删除未填充的列表.