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

Posted 2023-02-26

【中文标题】ExtJS 4.1：如何在组合框中设置预选项目？

【英文标题】：ExtJS 4.1: how to set a preselected item in a combo box?

【发布时间】：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 的客户。 谁能帮我 ？ 提前致谢。 恩里科。

【参考方案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);