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