Question

我发现了许多问题，解释了为什么JSON存储未在Ext JS comboBox中更新。

我们已经制作了一个可重复使用的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;
    }
}

}）;

当我动态地将另一个项目添加到comboBox存储时，comboBox不会刷新。我试过以下的事情。

以下尝试在comboBox中显示空白元素

调用商店中的removeAll（），clearValue（）函数并使用bindStore（模型）重新初始化，它会出现空列表项。
comboBox.store.reload（模型）;

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

var data = []; data.push（new Ext.data.Record（{id：options [0] .Id，displayField：options [0] .Code +'|'+ options [0] .Description}））; comboBox.store.add（数据）;
comboBox.store.loadData（data，true）;

有没有人看到过我正在谈论的内容并在努力？

提前感谢您的帮助。

Answer 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();

}}）;

ExtJS ComboBox动态JSON更新

1 个答案: