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

Posted

技术标签:

【中文标题】Extjs 4.1 如何选择组合中的第一项【英文标题】:Extjs 4.1 How to select first item in combo 【发布时间】:2013-08-01 14:04:48 【问题描述】:

我的组合看起来像 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()
);

我希望当我单击清除按钮时,我的组合将选择第一个项目(空项目)。怎么解决谢谢

【问题讨论】:

【参考方案1】:

这对我有用

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

【讨论】:

【参考方案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() 选择它,然后立即删除未填充的列表。

【讨论】:

【参考方案3】:

这对我有用....

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

当组合框未加载时,选择不起作用。加载前然后选择。

【讨论】:

【参考方案4】:

这对我有用:

me.myCombo.setValue(valueIndex);

【讨论】:

以上是关于Extjs 4.1 如何选择组合中的第一项的主要内容,如果未能解决你的问题,请参考以下文章

如何在 extjs 4.1 中使用包含图像的组合

如何选择 Access Web 兼容表单中组合框的第一项?

如何在 extJs 4.1 组合框多选中仅选择两个选项

ExtJS 4.1 - 编辑单元格时消失的选择(组合框编辑器)

如何隐藏组合中的项目 - Extjs 4.1

Extjs 4.1 - 如何等待组合中的所有商店被加载