sencha touch create tabs from store data - extjs

Question

I am new to Senscha Touch and I have been struggling with this for hours.
I am trying to create an application where the main page has 1-3 tabs where title and content(html5) depends on json data.
My model has two fields: "title" and "text".
My store has dummy data for 2 tabs:
Ext.define('***', {
extend: 'Ext.data.Store',
config: {
model: '***',
xtype: 'informationTabs',
data: [
{
title: 'Museum',
text: 'Random html5'
},
{
title: 'Museum_2',
text: 'Random html5_2'
},
{
title: 'Museum_3',
text: 'Random html5_2'
}
]
}
})
To show it as a list i have the following code:
Ext.define('***', {
extend: 'Ext.Panel',
xtype: 'informationsTabs',
config: {
title: 'InformationTabs',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'InformationTabs',
itemTpl: '{title}, {text}'
}
]
}
});
How do I get that to instead of making a list with two items, create two tabs with their title and text inside?
So in this case i should have two tabs.
Tab 1: Title = "title_1", content = "random_html5"
Tab 2: Title = "title_2", content = "random_html5_2"
Update:
With the following code (thanks kevhender!) it "works", except i get an extra "[object Object]" as the first tab. This option is also the only one with blue background when you click that tab.
Also this.callParent(); gets "Unresolved function or method".
Ext.define('***', {
extend: 'Ext.TabPanel',
xtype: 'informationsTabs',
config: {
title: 'informationsTabs',
items: [
{
xtype: 'tabbar',
store: 'InformationTabs',
title: '',
html: ['']
}
]
},
initialize: function() {
var items = [];
Ext.getStore('InformationTabs').each(function(rec) {
items.push({
title: rec.get('title'),
html: rec.get('text')
});
});
this.setItems(items);
this.callParent();
} });
screenshot: http://oi41.tinypic.com/2gsn53p.jpg

Answer 1

Since the store is dynamic, you won't be able to do the full definition in your static config block. You could put the tab creation into the initialize method, something like this:
Ext.define('***', {
extend: 'Ext.tab.Panel',
xtype: 'informationsTabs',
config: {
title: 'InformationTabs',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'InformationTabs',
itemTpl: '{title}, {text}'
}
]
},
initialize: function() {
var items = [];
Ext.getStore('InformationTabs').each(function(rec) {
items.push({
title: rec.get('title'),
html: rec.get('text')
});
});
this.setItems(items);
this.callParent();
}
});