Changing the height or adding padding to an EXTjs ext.tab.Tab component

Question

I've got a a Tab panel with a few tabs inside. I'm using the iconCls property in the tabs to give each tab an image along with its title. I'm using the fam fam fam 16x16 icons and the default tab space is cutting the images off at the top/bottom.

I tried messing around with the icon's class by changing the margins but it's not helping. According to the documentation the ext.tab.Tab component has padding and height properties, but setting those is not having an effect on the tab at runtime.

Ext.define('AM.view.Tab.Standard', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.TabStandard',

    region: 'center', // a center region is ALWAYS required for border layout
    deferredRender: false,
    activeTab: 0,     // first tab initially active

    initComponent: function() {
      this.items = this.buildItems();  

      this.callParent(arguments);    
    },

    buildItems: function(){
      var items = 
            [
                {
                    padding: 10, // nope :(
                    title: 'Gantt',
                    autoScroll: true,
                    iconCls: 'gantt icon',
                }, 
                {
                    height: 10, // nope :(
                    title: 'Logs',
                    autoScroll: true,
                    iconCls: 'logs icon',
                },
                {
                    title: 'Help',
                    autoScroll: true,
                    iconCls: 'help icon',
                }
            ];
        return items
    },
});

Perhaps I'm misunderstanding how those properties work, but the everything on the page looks the same.

EDIT: It appears I'm having the same problem with the "Headings" (the bar with the +/-) when used as an accordion panel.

I tried that and I can change the properties of the buttons individually, but the content window of the tab panel doesn't get pushed down to accommodate the new height. I was hoping passing these properties to the buttons would affect the content window as well. Maybe not? — RoboKozo
Ok.But try to change the tab properties that using id of the tab in css.you can get the particular css in firebug.Hope you will get the result. — Unknown

Sasha Brocato Sasha Brocato · Accepted Answer · 2013-06-18T21:19:41

You can customize tabs in a tab panel by using the tabBar property on tabPanel:

var tabpanel = new Ext.tab.Panel({
   plain: true,
   region: 'center',
   tabBar: {
        defaults: {
            flex: 1, // if you want them to stretch all the way
            height: 20, // set the height
            padding: 6 // set the padding
         },
        dock: 'top'
    }

});

Changing the height or adding padding to an EXTjs ext.tab.Tab component

1 Answers