Question

嘿伙计们我正在开始使用Sencha Touch，感觉我阅读的教程/文档很有帮助。我试图理解：tabbar和tabpanel之间的区别以及何时使用它们

例如，我有一个带有列表项的索引面板，一旦有人点击它，它就会转到底部有一个标签栏的页面。我想使用带有tabbar的新面板或只是一个tabpanel？

Answer 1

我正在做类似的事情，请查看下面的代码。至于TabPanel和TabBar之间的区别，TabBar似乎只是TabPanel的一个组件，用于显示和操作选项卡按钮。

以下代码的列表部分来自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();
}

}）;

Answer 2

你应该只使用tabPanel来完成它。使用dock：bottom添加tabBar 属性。对于项目列表中的对象，添加标题和iconCls，以便按钮显示名称和图标。

TabPanel和TabBar之间的区别

2 个答案: