0

我发现许多问题解释了为什么 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;
    }
}

});

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

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

  1. 调用 store 上的 removeAll()、clearValue() 函数并使用 bindStore(model) 重新初始化，它会出现空列表项。

  2. 组合框.store.reload(模型);

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

  1. 变量数据 = []; data.push(new Ext.data.Record({id: options[0].Id, displayField : options[0].Code + ' | ' + options[0].Description})); 组合框.store.add(data);

  2. 组合框.store.loadData（数据，真）；

有没有人看到并为我所说的而挣扎？

在此先感谢您的帮助。

4

1 回答 1

0

I tried your code and it works with the below change and it is not required to call store.loadData

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

What you have done is not the best way to map the returned JSON to your store, I have modified your code for the mappings which is the best way to do and it doesn't require you to call the load listener and manually add the records.

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

}});

于 2013-08-22T22:35:45.970 回答