title: ExtJS combobox set initial value dynamically from remote store on page load via PHP
body: <p>My current issue relates to showing an initial value in an ExtJS combobox relating to an employee's department in an employee detail page.</p>
  
  <p>The page retrieves the employee information via PHP, so all the references to the employee are done through PHP echo (the site uses CodeIgniter, which may confuse some; it just simplifies some of the input but works in the same way as normal PHP), i.e.</p>
  
  <pre><code>var formPanel = Ext.create('Ext.form.Panel', {
      title: 'User Details',
      width: 300,
      renderTo: Ext.get('details'),
      store: userStore,
      defaultType: 'textfield',
      items:
      [
          {
              fieldLabel:'User Name',
              name: 'UserName',
              allowBlank: false,
              value: '&lt;?php echo $Employee-&gt;UserName; ?&gt;'
          },
          //More details in similar format etc.
      ]
  });
  </code></pre>
  
  <p>There is a section for the departments, to be handled through a combobox, to list all departments; there is nothing fancy (I believe), it just lists all the departments:</p>
  
  <pre><code>    Ext.define('DeptModel', {
          extend: 'Ext.data.Model',
          fields: [
              {name:'Id', type: 'int'},
              {name:'Name', type: 'string'}
          ]
      });
  
      var deptStore = Ext.create('Ext.data.Store', {
          model:'DeptModel',
          autoload: true,
          proxy: {
              // load using HTTP
              type: 'ajax',
              url: '&lt;?= $site_url ?&gt;Settings/JSON/Departments',
              reader: {
                  type: 'json',
                  model: 'DeptModel'
              }
          }
      });
  </code></pre>
  
  <p>The formPanel above then references the deptModel/deptStore in a comboBox:</p>
  
  <pre><code>{
      fieldLabel:'Department',
      xtype:'combo',
      name:'Department',
      forceSelection: true,
      typeAhead: true,
      allowBlank: false,
      emptyText: 'Choose a Department',
      store: deptStore,
      displayField: 'Name',
      valueField: 'Id'
  }
  </code></pre>
  
  <p>The above combobox renders correctly and provides all the departments.  Attempts to initialise the combobox with a value, however, have not worked, ranging from no change in the combobox to creating errors that stop the page rendering. I have looked at the following:</p>
  
  <pre><code>value: 5   // or any integer
  value: '5' // or any string
  value: &lt;?php echo $Employee-&gt;DepartmentId ?&gt; // or any PHP reference like those that work for the textfields e.g. the User Name above - DepartmentId has been checked to be an integer
  value: '&lt;?php echo $Employee-&gt;DepartmentId ?&gt;' // stringifying the PHP reference
  value: 'Accounts'
  </code></pre>
  
  <p>I have also looked at the numerous posts relating to loading stores after rendering, setting values on store loading, setting values on render, setting values before the formPanel code; quite frankly, none have worked, and most refer to setting the value to the first in the list which doesn't treat my particular issue.</p>
  
  <p>Ideally, I want to simply state</p>
  
  <pre><code>value: &lt;?php echo $Employee-&gt;DepartmentId ?&gt;
  </code></pre>
  
  <p>to have the combobox display the relevant department (i.e. "Accounts") when the employee's details are displayed in the form on page load.</p>
  
  <p>Where am I going wrong? Why does <code>value: {value}</code> not do anything in practice? Can anyone provide a simple explanation as to the correct form of inserting a combobox into a formPanel that allows for the initial value in said combobox to be picked on page load, if the current implementation is somehow incorrect?</p>