title: Bind data to view from rest proxy in store in ExtJS
body: <p>I'm trying to populate data from JSON that I get via a rest URL into my view. For some reason the JSON value does not display.</p>
  
  <p>Here is my view:</p>
  
  <pre><code>Ext.define('Project.view.main.Main', {
      extend: 'Ext.panel.Panel',
      layout: 'border',
      bodyBorder: false,
      defaults: {
          collapsible: false,
          split: false
      },
      viewModel: {
          type: 'animalClassViewModel'  
      },
      items: [
          {
              region:'north',
              autoHeight: true,
              margin: '0 0 0 0',         
              bind: {
                  html: '&lt;p style="text-align: center;"&gt;{animalClass.name}&lt;/p&gt;' // this should display "mammals" from json
              }
          },
          {
              region: 'center',
              margin: '0 0 0 0',
              items:[
                  {
                      items: [{
                          xtype: 'tabPanel'
                      }]
                  }
              ]
          },
  
      ]
  });
  </code></pre>
  
  <p>Here is my view model:</p>
  
  <pre><code>Ext.define('Project.view.main.AnimalClassViewModel', {
      extend: 'Ext.app.ViewModel',
  
      alias: 'viewmodel.animalClassViewModel',
  
      stores: {
          animalClass: {
              model: 'Project.model.AnimalClassModel',
              autoLoad:true,
              proxy: {
                  type: 'rest',
                  url: 'api/animalClass',
                  reader: {
                      type: 'json',
                      rootProperty: 'name' // this is probably unnecessary 
                  }
              }
          }
      }
  });
  </code></pre>
  
  <p>My model:</p>
  
  <pre><code>Ext.define('Project.model.AnimalClassModel', {
      extend: 'Ext.data.Model',
  
      fields: ['name']
  });
  </code></pre>
  
  <p>And this is what the JSON looks like: </p>
  
  <pre><code>{
    "_links" : {
      "self" : {
        "href" : "http://localhost:8080/api/animalClass"
      }
    },
    "name" : "mammals"
  }
  </code></pre>
  
  <p>I tried just <code>{animalClass}</code> in the view, but it returned the entire object, which makes sense. But I'm not sure why <code>{animalClass.name}</code> doesn't display "mammals".</p>
  
  <p>I tried following this example: <a href="http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#binding-associations" rel="nofollow">http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#binding-associations</a> but it didn't work for me. It doesn't seem like it includes all of the components that are in play for it to work.</p>