ExtJS ComboBox 动态 JSON 更新答案

【问题标题】：ExtJS ComboBox dynamic JSON updatesExtJS ComboBox 动态 JSON 更新
【发布时间】：2025-12-15 22:00:01
【问题描述】：

我发现了许多解释为什么 JSON 存储没有在 Ext JS 组合框中更新的问题。

我们制作了一个可重复使用的 ExtJS 组合框控件，这是它的源代码。

Ext.define('ReusableComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.Reusablecombobox',
queryMode: 'local',
forceSelection: true,
valueField: 'id',
displayField: 'displayField',
autoLoad: false,
initComponent: function () {

    if (!this.store) {
        var store = Ext.create('Ext.data.Store', {
            autoLoad: this.autoLoad,
            fields:['id', 'displayField', 'Id', 'Code', 'Description', 'IsIncluded', 'IsActive'],
            proxy: {
                type: 'ajax',
                url: urlContent('validurl/getcodes'),
                reader: {
                    type: 'json',
                    root: 'data'
                }
            }
        });

        store.on('load', this.handler_StoreLoad, this);

        Ext.apply(this, {
            store: store
        });

    }
    this.callParent();
},

handler_StoreLoad: function (store, records, successful, options) {

    addFieldsToList(records, function (item) {
        item.data['id'] = item.data.Id;
        item.data['displayField'] = item.data.Code + ' | ' + item.data.Description;
    });
},

addFieldsToList: function( list, buildDisplayFieldFunc ){
    if( list ){
        for( var i=0, j=list.length; i<j; i++ ){
            buildDisplayFieldFunc( list[i] );
        }
        return list;
    }
}

});

当我将另一个项目动态添加到组合框存储时，组合框不会刷新。我尝试了以下方法。

以下尝试在组合框中出现空白元素

在store上调用removeAll()、clearValue()函数并使用bindStore(model)重新初始化，得到空列表项。
comboBox.store.reload(model);

以下尝试将新项目添加为组合框中的空白元素

var 数据 = []; data.push(new Ext.data.Record({id: options[0].Id, displayField : options[0].Code + ' | ' + options[0].Description})); comboBox.store.add(data);
comboBox.store.loadData(data, true);

有没有人看到我在说什么并为之苦恼？

提前感谢您的帮助。

【问题讨论】：

标签： json extjs combobox

【解决方案1】：

我尝试了您的代码，它适用于以下更改，不需要调用 store.loadData

var data = []; data.push({id: options[0].Id, displayField : options[0].Code + ' | ' +   options[0].Description}); 
comboBox.store.add(data);

您所做的并不是将返回的 JSON 映射到您的商店的最佳方式，我已经修改了您的映射代码，这是最好的方法，它不需要您调用负载侦听器并手动添加记录。

Ext.define('ReusableComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.reusablecombobox',
queryMode: 'local',
forceSelection: true,
valueField: 'id',
displayField: 'displayField',
autoLoad: false,

initComponent: function () {

  if (!this.store) {
    var store = Ext.create('Ext.data.Store', {
        autoLoad: this.autoLoad,
        fields:[ 'Id', 'Code', 'Description', 'IsIncluded', 'IsActive', 
                    {
                        name: 'displayField',
                        convert: function(v, record) {
                            return record.get('Code') + ' | ' + record.get('Description');
                        }
                    },
                    {name: 'id', mapping: 'Id'}
        ],
        proxy: {
            type: 'ajax',
            url: urlContent('validurl/getcodes'),
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    });

    Ext.apply(this, {
        store: store
    });

}
this.callParent();

}});

【讨论】：