make tabpanel in a tab of another tabpanel. in sencha-touch - sencha-touch

Question

I'm trying to make a small application with sencha-touch and I have a tabpanel with the layout card. when I click on tab Producten a card slides in but what I want is that in that card comes another tabpanel so people can choose between Men and Women with also a layout card.
I tried a lot of stuff and nothing seems to work.
var rootpanel;
var panel;
Ext.setup({
onReady: function() {
var Home = {
cls: 'home',
title: "Home",
html: "Homepagina"
}
var Producten = {
title: "Producten",
html: "Productenpagina",
items: [
panel = new Ext.TabPanel({
cls: 'toolbar',
fullscreen: 'true',
ui: 'plain',
layout: 'card',
items: [Men, Women]
})
]
}
var Men = {
title: "Men",
html: "men"
}
var Women = {
title: "Women",
html: "Women"
}
var Winkelwagen = {
cls: 'winkelwagen',
title: "Winkelwagen",
html: "Winkelwagenpagina"
}
rootpanel = new Ext.TabPanel({
cls: 'toolbar',
fullscreen: true,
ui: 'plain',
layout: 'card',
items: [Home, Producten, Winkelwagen]
})
}
})

Answer 1

try this codes :
Ext.regApplication({
name : 'MyApp',
launch : function(){
window.localStorage.clear();
new MyApp.MainTabPanel({
fullscreen : true
});
}
});
MyApp.MainTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center'
}
},
cls: 'card1',
html: '',
items: [
{ iconCls: 'time', title: 'Time', xtype: 'TimeTabPanel'},
{ iconCls: 'user', title: 'People', xtype: 'PeopleTabPanel' }
]
});
Ext.reg('MainTabPanel',MyApp.MainTabPanel);
MyApp.PeopleTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'top',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'left'
}
},
cls: 'card1',
items: [
{ iconCls: 'user', title: 'Man' , html: 'MAN TAB'},
{ iconCls: 'user', title: 'Woman', html: 'WOMAN TAB' }
]
});
Ext.reg('PeopleTabPanel',MyApp.PeopleTabPanel);
MyApp.TimeTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'top',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'left'
}
},
cls: 'card1',
items: [
{ iconCls: 'time', title: 'AM', html: 'AM TAB' },
{ iconCls: 'time', title: 'PM', html: 'PM TAB' }
]
});
Ext.reg('TimeTabPanel',MyApp.TimeTabPanel);