如何为远程组合框呈现初始值的显示字段？

Question

我想呈现一个 ComboBox that has an initial value. The ComboBox is backed by a JsonStore 从某个 HTTP 端点加载数据。我希望显示显示字段，但我看到的是值。

作为变通方法，我可以等到加载商店后再设置初始值。但对于这样一个简单的用例来说，这似乎是一个棘手的解决方法。

有没有更简单的方法来为我的 ComboBox 呈现初始显示字段？

这是一个例子。您可以将此代码放入任何 ExtJS 3.4 Fiddle.

var remoteStore = new Ext.data.JsonStore({
    url: 'https://jsonplaceholder.typicode.com/todos',
    autoLoad: true,
    fields: ['id', 'title']
});

var remoteCombo = new Ext.form.ComboBox({
    fieldLabel: 'Remote Store (busted)',
    triggerAction: 'all',
    mode: 'local',
    store: remoteStore,
    valueField: 'id',
    displayField: 'title',
    value: '2',
});

// Workaround: only set the value AFTER the store is loaded.
// remoteStore.on('load', () => remoteCombo.setValue('2'));

new Ext.FormPanel({
    renderTo: Ext.getBody(),
    items: remoteCombo
});

Answer 1

为什么不覆盖缺失的功能（是的，看起来它缺失了）：

Ext.define('Override.form.ComboBox', {
    override : 'Ext.form.ComboBox',
    
    defaultValue: null,
    
    initComponent : function() {
        this.setDefaultValue();
        Ext.form.Checkbox.superclass.initComponent.call(this);
    },
    
    setDefaultValue: function() {
        if(this.defaultValue !== null) {
            if(this.getStore().lastOptions === null) {
                this.getStore().on('load', function(store) {
                    this.setValue(this.defaultValue);
                }, this, {single: true});
            } else {
                // How to avoid else here? :-/
                this.setValue(this.defaultValue);
            }
        }
    }
});

//-------------------------
var remoteStore = new Ext.data.JsonStore({
    url: 'https://jsonplaceholder.typicode.com/todos',
    autoLoad: true,
    fields: ['id', 'title']
});

var remoteCombo = new Ext.form.ComboBox({
    fieldLabel: 'Remote Store (busted)',
    triggerAction: 'all',
    mode: 'local',
    store: remoteStore,
    valueField: 'id',
    displayField: 'title',
    defaultValue: '2', // <-- New Property
});

// Workaround: only set the value AFTER the store is loaded.
// remoteStore.on('load', () => remoteCombo.setValue('2'));

new Ext.FormPanel({
    renderTo: Ext.getBody(),
    items: remoteCombo
});

我大约 10 年或更长时间没有使用 ExtJs v3.4..

如何为远程组合框呈现初始值的显示字段？

How to render the initial value's display field for a remote combo box?

extjs

extjs3