Question

Hey guys I’m starting to work with Sencha Touch and it feels like the tutorials I’ve read/documentation is helpful. I’m trying to understand: the difference between tabbar and tabpanel and when to use them

For example I have a index panel with list items, once someone clicks it, it goes to a page with a tabbar on the bottom. am I suppose to use a new panel with a tabbar or just a tabpanel?

Answer 1

I was working on something similar, check out the code below. As for the difference between TabPanel and TabBar it seems that TabBar is just a component of TabPanel used for displaying and manipulating tab buttons.

The list part of the below code has been taken form sencha touch API List

Ext.setup({
onReady: function() {
    Ext.regModel('Contact', {
        fields: ['firstName', 'lastName']
    });

    var store = new Ext.data.JsonStore({
        model  : 'Contact',
        sorters: 'lastName',

        getGroupString : function(record) {
            return record.get('lastName')[0];
        },

        data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'},
            {firstName: 'Ed',      lastName: 'Spencer'}
        ]
    });

    var tabPanel = new Ext.TabPanel({

        tabBar:{
            dock: 'bottom', // will put the menu on the bottom of the screen
            layout:{
                pack: 'center' // this will center the menu
            }
        },
        items:[
            {
                title: 'tab 1',
                html: 'TAB 1',
                iconCls: "home"
            },
            {
                title: 'tab 2',
                html: 'TAB 2',
                iconCls: "bookmarks",
            }
        ]

    });
    var list = new Ext.List({
        itemTpl : '{firstName} {lastName}',
        grouped : true,
        indexBar: true,

        store: store,

        listeners: {
            itemtap:function (subList, subIdx, el, e) {
                console.log(subList, subIdx, el, e);

                var store = subList.getStore(),
                        record = store.getAt(subIdx);

                if (record) {
                    mainPanel.setActiveItem(tabPanel, 'slide');
                }
            }}
    });

    // Main panel viewport
    var mainPanel = new Ext.Panel({
        fullscreen: true,
        layout: 'card',

        items:[list]
    });
    mainPanel.show();
}

});