Can't Get View to Display Store Data in Sencha Touch - sencha-touch-2

Question

I'm trying to display a list of simple data in Sencha-Touch 2. For some reason, It's not displaying the data and I'm unable to figure it out. I'm getting two title bars: the correct title with "Recent Posts" and a blank one underneath. I don't know why it is coming like this. Perhaps that's conflicting with the rest of the display?
Ext.define('GS.view.NewBlog',{
extend: 'Ext.navigation.View',
xtype: 'newblog',
requires: [
'Ext.dataview.List',
'Ext.TitleBar'
],
config: {
title: 'Blog',
iconCls: 'star',
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Recent Posts'
}, // end items
store: {
fields: ['title','author'],
data: [
{title: 'This is the first Title', author: 'John Smith'},
{title: 'This is the second title', author: 'Jane Doe'}
] // end data
} // end store
}, // end config
itemTpl: '{title}'
});

Answer 1

You need to define a Store:
Ext.define('GS.store.Posts', {`
extend: 'Ext.data.Store',`
config: {
data: [
{
title: 'This is the first Title',
author: 'John Smith'
},
{
title: 'This is the second title',
author: 'Jane Doe'
}
],
storeId: 'Posts',
fields: [
{
name: 'title'
},
{
name: 'author'
}
]
}
});
Define the Panel with a List using the Store:
Ext.define('GS.view.NewBlog', {
extend: 'Ext.Panel',
alias: 'widget.NewBlog',
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Recent Posts'
},
{
xtype: 'list',
itemTpl: [
'<div>{title} - {author}</div>'
],
store: 'Posts'
}
]
}
});
Your app.js:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
stores: [
'Posts'
],
views: [
'NewBlog'
],
name: 'GS',
launch: function() {
Ext.create('GS.view.NewBlog', {fullscreen: true});
}
});

Answer 2

Title Bar is showing twice because you are using Ext.navigation.View, which by default has titlebar. And you are adding one more title bar in the items.
Now define store and itemtpl inside an item, within config. You can define store seperately and mention the id of the store inside store.
items : [{
xtype : 'list',
store: 'store id goes here,
itemTpl: '{title}'
}]