title: EXTJS4.1 XTemplate not drawing from Store
body: <p>I am trying to create a sidebar navigation for my app with a store loaded with JSON data &amp; XTemplate. There is basic categories &amp; sub categories. However, the Categories are drawing, it isn't creating/rendering the sub-categories in the sidebar. Looking at the docs, mine is almost exactly the same as their "kids" example. What am I doing wrong?</p>
  
  <p>Doc: <a href="http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate" rel="nofollow">http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate</a></p>
  
  <p><strong>Model</strong></p>
  
  <pre><code>Ext.define('APP.model.SideBar', {
  extend: 'Ext.data.Model',
  
  fields: [
      {name: 'group',     type: 'string'},
      {name: 'tools',     type: 'string', mapping: 'tools'}        
  ],
  proxy: {
      type: 'ajax',
      url : '/js/res/sidebar.json',
      reader: {
           type: 'json',
           root: 'items'
       }
  }
  });
  </code></pre>
  
  <p><strong>sidebar.json</strong></p>
  
  <pre><code>{"items": [
  {
      "group": "Category1",
      "tools": [
          {"name": "Sub A1"}
      ]
  },{
      "group": "Category2",
      "tools": [
         {"name": "Sub B2"},
         {"name": "Sub B3"}
      ]
  }]}
  </code></pre>
  
  <p><strong>View</strong> It draws {group} but not {tools.name}</p>
  
  <pre><code>Ext.define('APP.view.SideBar', {
  alias: 'widget.appsidebar',
  extend: 'Ext.view.View',
  id: 'sidebar',
  width: 180,
  border: false,
  cls: 'sidebar-list',
  
  selModel: {
      deselectOnContainerClick: false
  },
  
  store: 'SideBar',
  itemSelector: '.apptool',
  tpl: [
      '&lt;tpl for="."&gt;',
              '&lt;div class="sidebar-title"&gt;{group}&lt;/div&gt;',
              '&lt;tpl for="tools"&gt;',
                  '&lt;div class="apptool"&gt;{name}&lt;/div&gt;',
              '&lt;/tpl&gt;',
      '&lt;/tpl&gt;'
  ]
  });
  </code></pre>