Sencha touch nested list no data - nested-lists

Question

I am new for sencha touch. I using mvc method. Please see my code below
Main.js
Ext.define('test.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.dataview.NestedList'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'nestedlist',
}
]
}
]
}
});
Nestedlist.js
Ext.define('bluebutton.view.NestedList', {
extend: 'Ext.NestedList',
xtype: 'nestedlist',
requires: [
'Ext.field.Select',
'Ext.field.Search',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
],
config: {
store : { xclass : 'Test.store.data'},
detailContainer: detailContainer,
detailCard: true,
},
});
Test.store.data
Ext.define('Test.store.data', {
extend: 'Ext.data.TreeStore',
config: {
model: 'Test.model.data',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
}
});
model.js
Ext.define('Test.model.data', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
But nested list no able to get the data. I get empty list. Any solution?

Answer 1

If you are providing inline data in store shouldn't it be data attribute instead of root?
Ext.define('Test.store.data', {
extend: 'Ext.data.TreeStore',
config: {
model: 'Test.model.data',
defaultRootProperty: 'items',
data: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
}
});