ExtJS ComboBox динамические обновления JSON

Question

Я нашел множество проблем, объясняющих, почему магазин JSON не обновляется в комбоBS Ext JS.

Мы создали многопользовательский элемент управления ExtJS combobox, это исходный код для него.

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

1. Вызовите RemoveAll(), ClearValue() функции на хранилище и повторно инициализировать с помощью bindStore (модель), речь идет о с пустым списком элементов.

2. comboBox.store.reload (model);

Следующие попыток добавляет новый элемент как пустой элемент в ComboBox

1. вар данные = []; data.push (new Ext.data.Record ({id: options [0] .Id, displayField: options [0] .Code + '|' + options [0] .Description})); comboBox.store.add (данные);

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

}});