EXTJS4.1 XTemplate not drawing from Store

Question

I am trying to create a sidebar navigation for my app with a store loaded with JSON data & XTemplate. There is basic categories & 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?

Doc: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate

Model

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'
     }
}
});

sidebar.json

{"items": [
{
    "group": "Category1",
    "tools": [
        {"name": "Sub A1"}
    ]
},{
    "group": "Category2",
    "tools": [
       {"name": "Sub B2"},
       {"name": "Sub B3"}
    ]
}]}

View It draws {group} but not {tools.name}

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: [
    '<tpl for=".">',
            '<div class="sidebar-title">{group}</div>',
            '<tpl for="tools">',
                '<div class="apptool">{name}</div>',
            '</tpl>',
    '</tpl>'
]
});

Answer 1

I believe that the problem is not in xtemplate but in view. Docs for view.itemSelector say:

This is a required setting. A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes this DataView will be working with. The itemSelector is used to map DOM nodes to records. As such, there should only be one root level element that matches the selector for each record

Check out this thread concerning the problem of displaying hierarchical data in views.