cant customize the tabbar view in TabPanel in sencha touch 2. The default view is showing always.

Question

I want to change the view of tabs i want them large & rectangle but they are showing like default capsules (rectangular with curved radius). How to customize them?

HERE IS THE CODE

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

You're possible change it in your css file:

If your tab panel docked at top:

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

If your tab panel docked at bottom:

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