Sencha touch 在另一个tabpanel的选项卡中创建tabpanel。触碰森查

我正在尝试使用

senchatouch

制作一个小应用程序，我有一个带有布局卡的

tabpanel

。当我点击tab

Producten

时，一张卡片滑入，但我想要的是，在该卡片中会出现另一张

tabpanel

，这样人们就可以通过布局

卡片在男性和女性之间进行选择

我试了很多东西，但似乎都不管用

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]
        })
    }
})

请尝试以下代码：

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);
Ext.Reapplication（{
名称：“MyApp”，
启动：函数（）{
window.localStorage.clear（）；
新建MyApp.MainTabPanel（{
全屏：正确
}); 
} 
});
MyApp.MainTabPanel=Ext.extend（Ext.TabPanel{
全屏：对，
选项卡栏：{
船坞：“底部”，
滚动：‘水平’，
可排序：是的，
布局：{
包装：'中心'
}
},
cls:“card1”，
html:“”，
项目：[
{iconCls:'time'，title:'time'，xtype:'TimeTabPanel'}，
{iconCls:'user'，title:'People'，xtype:'PeopleTabPanel'}
]
});
Ext.reg（'MainTabPanel'，MyApp.MainTabPanel）；
MyApp.PeopleTabPanel=Ext.extend（Ext.TabPanel{
全屏：对，
选项卡栏：{
码头：“顶部”，
滚动：‘水平’，
可排序：是的，
布局：{
包装：'左'
}
},
cls:“card1”，
项目：[
{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{
全屏：对，
选项卡栏：{
码头：“顶部”，
滚动：‘水平’，
可排序：是的，
布局：{
包装：'左'
}
},
cls:“card1”，
项目：[
{iconCls:'time'，title:'AM'，html:'AM TAB'}，
{iconCls:'time'，title:'PM'，html:'PM TAB'}
]
});
Ext.reg（'TimeTabPanel'，MyApp.TimeTabPanel）；