Question

我正在尝试使用sencha-touch创建一个小应用程序，并且我有一个tabpanel的布局卡。当我点击标签Producten时，卡片会滑入，但我想要的是该卡片中的另一张tabpanel，因此人们可以选择男性和女性同时使用布局card。

我尝试了很多东西，似乎没什么用。

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

试试这段代码：


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);

在另一个tabpanel的选项卡中制作tabpanel。在sencha-touch

1 个答案: