model-view-controller - 无法在 sencha touch 2 中自定义 TabPanel 中的标签栏视图。默认视图始终显示。

Question

我想更改选项卡的视图，我希望它们大且呈矩形，但它们显示为默认胶囊（具有弯曲半径的矩形）。如何自定义它们？

这是代码

var entryForm = Ext.define("TimeSheet.view.Newentry", {
extend: "Ext.TabPanel",
requires: ["Ext.XTemplate", "Ext.field.DatePicker", "Ext.field.Select", "Ext.TitleBar", "Ext.DateExtras"],
xtype:'newentryview',

config: {
    autodestroy: true,
    fullscreen: true,
    scrollable: true,
    cardSwitchAnimation: 'cube',
    tabBarPosition: 'top',
    tabBar: {
        height: '70px',
        layout: {
            pack: 'center'
        }
    },
    defaults: {
        styleHtmlContent: true
    },
    items: [{
        title: 'Add Entry',
        iconMask: true,
        iconCls: 'info',
        flex: 1,
        style: 'border: none; font: 22px Arial black',
        fullscreen: true,
    },{
        title: 'Dashboard',
        iconMask: true,
        iconCls: 'compose',
        flex: 1,
        cls: 'dashpnl',
        style: 'border: none; font: 22px Arial black',
        fullscreen: true,
    },{
        title: 'Settings',
        iconMask: true,
        iconCls: 'settings',
        fullscreen: true,
        html: 'Page 3',
    }]
}

});

Answer 1

您可以在您的 css 文件中更改它：

如果您的标签面板停靠在顶部：

.x-tabbar.x-docked-top .x-tab {
    padding: 0.4em 2em;
    -webkit-border-radius: 0em;
    border-radius: 0em;
}

如果您的标签面板停靠在底部：

.x-tabbar.x-docked-bottom .x-tab {
    padding: 0.4em 2em;
    -webkit-border-radius: 0em;
    border-radius: 0em;
}