Sencha Touch 2: Add NestedList inside TabPanel - sencha-touch-2

Question

I try to insert a NestedList in a TabPanel, but I get an empty list, the content is not displayed. How to make visible this Neestedlist
Code I tried:
Thank you in advance for your help
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
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 }
]
}
]
}
});
Ext.create('Ext.NestedList', {
fullscreen: true,
store: treeStore
});
Ext.application({
name: 'Sencha',
launch: function() {
// The whole app UI lives in this tab panel
Ext.Viewport.add({
requires: ['Ext.List', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
xtype: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
// This is the recent blogs page. It uses a tree store to load its data from blog.json.
{
xtype: 'nestedlist',
title: 'Blog',
iconCls: 'star',
cls: 'blog',
displayField: 'title',
store: treeStore
}
]
});
}
});

Answer 1

At the bottom of your provided code, in the Nested List you are creating, you are setting a displayfield property with a value of "title". Therefore the list is trying to use the "title" field from your model, which does not exist. Either change your store data to use "title" instead of "text", or remove the displayField property (as the default is already "text").