I am creating a sencha touch 2 application where I have TabPanel one of the items of this again has a tab panel.
Problem is inner tabs are not working. The view is not getting updated with the html of the clicked tab.
Main view(Main.js) looks like,
Ext.define('FirstApp.view.Main', {
extend: 'Ext.TabPanel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'FirstApp.view.mypages.Card'
],
config: {
tabBarPosition: 'bottom',
items: [
{xtype:'mypagescard'},
{
title: 'Tab 2',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Tab 3'
}
]
},
{
title : 'Tab 3',
iconCls: 'user',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Tab 3'
}
]
}
]
}
});
Card.js
Ext.define('FirstApp.view.mypages.Card', {
extend: 'Ext.Panel',
xtype: 'mypagescard',
requires : [
'FirstApp.view.mypages.Tabs'
],
config: {
iconCls: 'home',
title: 'Tab 1',
html: 'placeholder text',
styleHtmlContent: true,
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Tab 1'
},
{
xtype : 'mypagestabs'
}
]
}
});
Tab.js
Ext.define('FirstApp.view.mypages.Tabs', {
extend: 'Ext.TabPanel',
xtype: 'mypagestabs',
requires: ['Ext.TitleBar', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
config: {
ui: 'light',
tabBar: {
layout: {
pack: 'center'
}
},
activeTab: 1,
defaults: {
scrollable: true,
styleHtmlContent: true
},
items: [
{
title: 'Sub tab 1',
items: [ {
xtype: 'list',
title: 'Sample',
itemTpl: '{title}',
data: [{
title: 'Item 1'
}]
}]
},
{
title: 'Sub tab 2',
html: ''
}
]
}
});
Basically I am just trying to add a title bar on the homepage in this example