title: Data binding associations in ExtJS admin template
body: <p>I'm unsuccessful in getting binding associations working in the admin dashboard template (with the desired behavior of selecting a record from a combobox and pulling up associated records in a grid).</p>
  
  <p>My main viewModel is defined as:</p>
  
  <pre><code>Ext.define('Admin.view.main.MainModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.main',
  
  
      stores: {
          patients: {
              model: 'md_registry.model.Patient', 
              autoLoad: true
          }
      }
  
  });
  </code></pre>
  
  <p>I added a leaf node to Pages in NavigationTree.js:</p>
  
  <pre><code>{
              text: 'Pages',
              iconCls: 'x-fa fa-leanpub',
              expanded: false,
              selectable: false,
              //routeId: 'pages-parent',
              //id: 'pages-parent',
  
              children: [
  
                  {
                      text: 'Proc',
                      iconCls: 'x-fa fa-send',
                      rowCls: 'nav-tree-badge nav-tree-badge-hot',
                      viewType: 'procedure',
                      leaf: true
                  }]
  }
  </code></pre>
  
  <p>With the procedure view being:</p>
  
  <pre><code>Ext.define('Admin.view.pages.Procedure', {
      extend: 'Ext.panel.Panel',
      xtype: 'procedure',
  
      requires: [
          'Ext.panel.Panel',
          'Admin.model.Patient',
          'Admin.model.Procedure'
          //'Admin.model.Diagnosis'
      ],
  
      anchor : '100% -1',
  
      referenceHolder: true,
  
  
      width: 1000,
      height: 1000,
      referenceHolder: true,
      layout: {
          type: 'hbox',
          align: 'stretch'
      },
  
  
      viewModel: 'main',
      session: {},
  
      items: [
          // https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
  
          {
              xtype: 'fieldset',
              layout: 'anchor',
              items: [{
                  xtype: 'combobox',
                  listeners : {
                      select : function() {
                          console.log(arguments)
                          console.log(arguments[1].data.birth_date)
                          console.log(arguments[1].data.first_name)
                          console.log(arguments[1].data.last_name)
                          console.log(arguments[1].data.sex)
  
                      }
                  },
                  bind: {
                      store: '{patients}'
                  },
                  reference: 'patientCombo',
                  publishes: 'id',
                  fieldLabel: 'Patient Search',
                  displayField: 'mrn',
                  //anchor: '-',
                  // We're forcing the query to run every time by setting minChars to 0
                  // (default is 4)
                  minChars: 2,
                  queryParam: '0',
                  queryMode: 'local',
                  typeAhead: true,
                  // https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
                  doQuery: function(queryString, forceAll) {
                      this.expand();
                      this.store.clearFilter(!forceAll);
  
                      if (!forceAll) {
                          this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
                      }
                  }
  
  
              }, {
                  // https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
                  xtype: 'displayfield',
                  fieldLabel: 'Selected Patient',
                  bind: {
                      html: '&lt;p&gt;Name: &lt;b&gt;{patientCombo.selection.first_name}, ' +
                      '{patientCombo.selection.last_name} &lt;/b&gt;&lt;/p&gt;' +
                      '&lt;p&gt;Sex: {patientCombo.selection.sex}&lt;/p&gt;' +
                      '&lt;p&gt;Birthdate: {patientCombo.selection.birth_date}&lt;/p&gt;'
                  }
  
  
              }]
          },
  
  
          {
              title: 'Procedures',
              xtype: 'grid',
              bind: '{patientCombo.selection.procedures}',
              flex: 1,
              margin: '0 0 0 10',
              columns: [{
                  text: 'Procedure Date', dataIndex: 'proc_date', flex: 1
              }, {
                  text: 'Procedure', dataIndex: 'proc_name', flex: 1
              }],
  
              plugins: [{
                  ptype: 'rowexpander',
                  rowBodyTpl : new Ext.XTemplate(
                      '&lt;p&gt;&lt;b&gt;Proc Name Orig:&lt;/b&gt; {proc_name_orig}&lt;/p&gt;',
                      '&lt;p&gt;&lt;b&gt;Proc Code:&lt;/b&gt; {proc_code}&lt;/p&gt;',
                      '&lt;p&gt;&lt;b&gt;Proc Code Type:&lt;/b&gt; {proc_code_type}&lt;/p&gt;')
              }],
  
              viewConfig: {
                  emptyText: 'No procedures',
                  deferEmptyText: false
              }
          }]
  });
  </code></pre>
  
  <p>My Patient and Procedure models are simply:</p>
  
  <pre><code>Ext.define('Admin.model.Procedure', {
      extend: 'Ext.data.Model',
  
      idProperty: 'id',
      fields: [
          //{ name: 'id', type: 'string' },
          { name: 'proc_code', type: 'string' },
          { name: 'proc_name', type: 'string' },
          { name: 'proc_code_type', type: 'string' },
          { name: 'proc_name_orig', type: 'string' },
          { name: 'proc_date', type: 'date', format: 'Y-m-d' },
          {
              name: 'patient_id',
              type: 'string',
              reference: {
                  parent: 'Admin.model.Patient',
                  //type: 'md_registry.model.Patient',
                  inverse: 'procedures',
                  autoLoad: false
              }
          }
      ],
  
      proxy: {
          type: 'rest',
          url: 'http://127.0.0.1:5000/procedureview/api/read',
          reader: {
              type: 'json',
              rootProperty: ''
          }
      }
  
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>Ext.define('Admin.model.Patient', {
      extend: 'Ext.data.Model',
  
      requires: [
          'Ext.data.proxy.Rest'
      ],
  
      fields: [
          { name: 'id', type: 'string' },
          { name: 'mrn', type: 'string' },
          { name: 'birth_date', type: 'date', format: 'Y-m-d' },
          { name: 'sex', type: 'string' },
          { name: 'first_name', type: 'string' },
          { name: 'last_name', type: 'string' }
      ],
  
      proxy: {
          type: 'ajax',
          url: 'http://127.0.0.1:5000/patientview/api/read',
          reader: {
              type: 'json',
              rootProperty: ''
          }
      }
  
  });
  </code></pre>
  
  <p>respectively.</p>
  
  <p>The data for my Patients store are getting loaded into the combobox just fine, but when I select an item from the combo list it is not firing off the call to grab the associated procedures data (see image: <a href="https://i.stack.imgur.com/rS3fh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rS3fh.png" alt="of no binding association"></a>. </p>
  
  <p>However, the binding associations work as expected with Side Navigation Tabs (see image: <a href="https://i.stack.imgur.com/HsIgZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HsIgZ.png" alt="of working binding association"></a>, and show up within the object prototype chain, as expected... see</p>
  
  <p><a href="https://i.stack.imgur.com/1t7cX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1t7cX.png" alt="associations bound to model"></a></p>
  
  <p>(whereas for the admin dashboard, the associations are empty).</p>
  
  <p>I cannot for the life of me get these working in the Admin Dashboard. I noticed a tool called the bind inspector, but I am running the GPL version of the SDK, so I do not have access to this. Beyond this, I cannot figure out a way to debug why the binding association is not working in the admin dashboard, but otherwise works perfectly well in Side Navigation Tabs.</p>
  
  <p>I would set up a Fiddle, but I have no idea how to do it using the Admin Template.</p>