title: ExtJS ComboBox dynamic JSON updates
body: <p>I have found numerous issues explaining why the JSON store is not updated in an Ext JS comboBox.</p>
  
  <p>We have made a re-usable ExtJS combobox control, this is the source code for it.</p>
  
  <pre><code>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&lt;j; i++ ){
              buildDisplayFieldFunc( list[i] );
          }
          return list;
      }
  }
  </code></pre>
  
  <p>});</p>
  
  <p>When I dynamically add another item to the comboBox store, the comboBox does not refresh. I have tried the following things.</p>
  
  <p><strong>The following tries comes up with blank elements in the comboBox</strong></p>
  
  <ol>
  <li><p>Call the removeAll(), clearValue() functions on the store and re-initialize using the bindStore(model), it comes up with empty list items.</p></li>
  <li><p>comboBox.store.reload(model);</p></li>
  </ol>
  
  <p><strong>The following tries adds the new item as a blank element in the comboBox</strong></p>
  
  <ol>
  <li><p>var data = [];
  data.push(new Ext.data.Record({id: options[0].Id, displayField : options[0].Code + ' | ' + options[0].Description}));
  comboBox.store.add(data);</p></li>
  <li><p>comboBox.store.loadData(data, true);</p></li>
  </ol>
  
  <p>Has anyone seen and struggled with what I am talking about ?</p>
  
  <p>Thanks in advance for your help.</p>