Question

我正在使用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的客户。谁能帮我？提前致谢。恩里科。

Answer 1

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

combobox.setValue(id);

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

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

编辑：清晰度

Answer 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']);?>);
            }
        });
    }
 }

Answer 3

以编程方式使用combo.set Value（val）或声明性地：

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

Answer 4

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

Answer 5

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

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

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

5 个答案: