Sencha Touch 2 Dynamic Items Array - json

Question

In the following example, I would like to replace the hard-coded items array with a call to a jsonstore with with same items read dynamically. I have tried referencing the store through xtype but get an error that Object has no method 'getItemId' - please let me know what I am doing wrong and many thanks for your help
Ext.define("MyApp.view.Main", {
extend: 'Ext.ux.slidenavigation.View',
requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],
config: {
fullscreen: true,
slideSelector: 'x-toolbar',
selectSlideDuration: 200,
list: {
maxDrag: 400,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Navigation',
centered: false,
width: 200,
left: 0
}
}]
},
/***************************************************************/
/* Want to replace this items array with dynamic call to store */
/***************************************************************/
items: [{
title: 'Item 1',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 1',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
},{
title: 'Item 2',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 2',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
}]
}
Store sample
Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
json sample
[
{
"title": "Item 1",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 1',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
},
{
"title": "Item 2",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 2',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
}
]

Answer 1

Assuming your store is loading correctly, you can get a reference to it by calling
Ext.getStore('navStore')
or by assigning your store to a variable:
var yourStore = Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
To populate the items object I would put it in a container:
{
xtype: 'container',
id: 'container_id',
}
then
for (var i = 0; Ext.getStore('navStore').getCount(); ++i){
var record = Ext.getStore('navStore').getAt(i);
var myComponent = Ext.create(...
//make the component you want to add with the data from the record
);
Ext.ComponentQuery.query('#container_id')[0].add(myComponent);
}