Разница между TabPanel и TabBar - PullRequest
Новая
       2

Разница между TabPanel и TabBar

1 голос
/ 14 июля 2011

Привет, ребята, я начинаю работать с Sencha Touch, и кажется, что прочитанные мной уроки / документация полезны.Я пытаюсь понять: разница между панелью вкладок и панелью вкладок и когда их использовать

Например, у меня есть индексная панель с элементами списка, когда кто-то нажимает на нее, она переходит на страницу с панелью вкладок наниз.я предполагаю использовать новую панель с панелью вкладок или просто панель вкладок?

Ответы [ 2 ]

1 голос
/ 15 июля 2011

Я работал над чем-то похожим, посмотрите код ниже. Что касается разницы между TabPanel и TabBar, то кажется, что TabBar - это просто компонент TabPanel, используемый для отображения и управления кнопками вкладок.

Часть списка приведенного ниже кода взята из Sencha Touch API Список 

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

});

0 голосов
/ 14 июля 2011

Вы должны быть в состоянии сделать это только с помощью tabPanel. Добавьте свойство tabBar с помощью dock: bottom. Для объектов в списке элементов добавьте заголовок и iconCls, чтобы кнопки отображались с именами и значками.

...