PDA

View Full Version : Help with XTemplate & my Store



hallikpapa
30 May 2012, 12:03 PM
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 (Category 1 and Category 2) 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. As you can see, 'tools' is just an array of simple objects, not associations. So I would think this should work. 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**


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



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

mitchellsimoens
7 Jun 2012, 12:34 PM
The field for tools you have type of string so it is converting the array to string. You should remove the type and mapping configs for the tools field and it should keep it as an array.