ExtJS 4.1：如何在组合框中设置预选项目？答案

【问题标题】：ExtJS 4.1: how to set a preselected item in a combo box?ExtJS 4.1：如何在组合框中设置预选项目？
【发布时间】：2012-06-12 15:21:48
【问题描述】：

我正在使用 ExtJS 4.1，我需要创建一个包含客户列表的组合框，并且我想在其中设置一个特定的预选项目，但我不知道该怎么做。这是创建我的组合框的代码：

xtype: 'combobox',
fieldLabel: 'customer',
name: 'customer_id',
allowBlank:false,
afterLabelTextTpl: required,
//data store
store: Ext.create('Ext.data.Store', {
    autoDestroy: true,
    model: 'customer_model',
    autoLoad: true,
    proxy: {
        type: 'ajax',
    url: 'load.php?item=customer',            
    reader: {
        type: 'json',
        successProperty: 'success',
        root: 'data'
    }
    }
}),
valueField: 'id',
displayField: 'company',
typeAhead: true,
queryMode: 'remote',
emptyText: ''

如您所见，我的组合框由数据存储填充，该数据存储基于名为“customer_model”的数据模型构建。这是数据模型的代码：

Ext.define('customer_model', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'int', name: 'id'},
        {type: 'string', name: 'company'},
        {type: 'string', name: 'vat'},
        {type: 'string', name: 'ssn'},
        {type: 'int', name: 'ref_id'}
    ]
});

好吧，我想配置我的组合框，以便在加载页面时自动选择某个项目，例如 id 等于 1 的客户。谁能帮我？提前致谢。恩里科。

【问题讨论】：

标签： extjs extjs4.1

【解决方案1】：

在 Ext.js 3.2.1 中，您可以这样做：

combobox.setValue(id);

这假定组合框配置为使用 id 作为 valueField。您的代码似乎表明情况就是这样。您还需要引用要设置值的 id 值。这里需要注意的是，您需要确保此代码仅在模型加载后执行，否则组合框将没有任何可显示的内容。您可以通过在 ajax 调用的回调方法或商店的加载事件中设置组合框来确保这一点。

我查看了 Ext.js 4.1 的文档，并且这种方法似乎仍然存在。我相信这应该可以解决问题。

编辑：清晰度

【讨论】：

感谢您的回答，对解决我的小问题很有帮助:)

【解决方案2】：

感谢克里斯托弗的帮助，我编写了我的代码的工作版本，我决定在这里发布它，也许它可能对某人有用...：

buttons: [{
    text: 'Load',
    handler: function(){
        var form = this.up('form').getForm();
        var combobox = form.findField('ref_id_combo');
        formPanel.getForm().load({
            url: <?php echo "'update_loader.php?id=".$_GET['id']."&item=customer',"; ?>
            waitMsg: 'Loading...',
            success: function(form, action) {
                combobox.setValue(<?php echo  get_property_id("ref_id","customer",$_GET['id']);?>);
            }
        });
    }
 }

【讨论】：

【解决方案3】：

以编程方式使用 combo.setValue(val) 或声明方式：

{
    xtype: 'combo',
    value: val,
    ...
}

【讨论】：

【解决方案4】：

如果您想选择商店的第一个值，您可以这样做 combo.select(combo.getStore().getAt(0)) 它将选择组合存储索引 0 处的值

【讨论】：

【解决方案5】：

如果你先创建自己的商店，可以使用afterrender: function(combo){}

listeners: {
    afterrender: function (combo) {
        var record = yourStore.getAt(0);
        var abbr= record.get('abbr');
        combo.setValue(abbr);
    }
}

【讨论】：