сделать вкладку во вкладке другой вкладки.в сенча-тач - PullRequest
2 голосов
/ 12 мая 2011

Я пытаюсь сделать небольшое приложение с 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]
        })
    }
})

1 Ответ

2 голосов
/ 13 мая 2011

попробуйте следующие коды:


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


...