title: Loading the items for a combo box in advance with EXTjs
body: <p>I have the items for a combo box being loaded from a store but what happen is when the combo box item list is to be displayed because the user clicked to 'expand it', it has to 're-load' the data from the store proxy. This causes the list to flash and become unselected, forcing the user to click the drop down another time.</p>
  
  <p>Step 1 (on page load):</p>
  
  <p><img src="https://i.stack.imgur.com/GADEU.png" alt="Page is loaded, combo not visible, but firebug shows priorities is already loaded"></p>
  
  <p>Clicking on the cell to edit it:</p>
  
  <p><img src="https://i.stack.imgur.com/5HSRC.png" alt="cell is clicked to edit, combo box now visible, firebug shows no changes"></p>
  
  <p>Clicking on the down arrow in the combobox. Again, this ajax call forces the combobox to automatically close, forcing the user to re-click the down arrow.</p>
  
  <p><img src="https://i.stack.imgur.com/Gpggu.png" alt="down arrow on dropdown clicked, firebug shows another ajax call was made."></p>
  
  <p>View</p>
  
  <pre><code>Ext.define('AM.view.card.BacklogList', {
      extend: 'Ext.grid.Panel',
      alias: 'widget.backlogcardlist',
  
      title: 'Backlog',
      store: 'BacklogCards',
  
      selType: 'cellmodel',
      plugins: [
          Ext.create('Ext.grid.plugin.CellEditing', {
              clicksToEdit: 1
          })
      ],
  
      columns: [
          { header: 'ID', dataIndex: 'id' },
          { header: 'Name', dataIndex: 'name', field: 'textfield' },
          {
              header: 'Priority',
              dataIndex: 'priority_id',
              renderer: function(value){
                  if (value==3)
                  {
                      return "L";
                  }
                  else if (value==2)
                  {
                      return "M";
                  }
                  else
                  {
                      return "H";
                  }
              },
              width: 130,
              field: {
                  xtype: 'combobox',
                  typeAhead: true,
                  store: 'Priorities',
                  displayField: 'name',
                  valueField: 'id',
                  listClass: 'x-combo-list-small'
              }
          }
      ]
  
  });
  </code></pre>
  
  <p>Store:</p>
  
  <pre><code>Ext.define('AM.store.Priorities', {
      extend: 'Ext.data.Store',
      model: 'AM.model.Priority',
      autoLoad: true,
  
      proxy: {
          type: 'ajax',
          api: {
              read: 'app/data/priorities.json',
              update: 'app/data/updateUsers.json'
          },
          reader: {
              type: 'json',
              root: 'priorities',
              successProperty: 'success'
          }
      }
  });
  </code></pre>
  
  <p>priorities.json</p>
  
  <pre><code>{
      success: true,
      priorities: [
          {
              id              : 1, 
              name            : "High",
              short_name      : "H"
          },
          {
              id              : 2, 
              name            : "Medium",
              short_name      : "M"
          },
              {
              id              : 3, 
              name            : "Low",
              short_name      : "L"
          }
      ]
  }
  </code></pre>