Ext.tab.Bar - setting border has no effect.

[urlund]

Ext version tested:

• Ext 4.0.2

Browser versions tested against:

• Chrome 12

Description:

• Setting border has no effect.

Steps to reproduce the problem:

• Create an Ext.TabPanel where the tabBar is configured with 10 or 0

The result that was expected:

• Should be able to set a fixed border size, or remove it completely

The result that occurs instead:

• Nothing happens - only default style is available

Test Case:

Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 200,
        renderTo: Ext.getBody(),
        
        //this is the config that is being ignored
        tabBar: {
            border: 10 // or 0 to remove it
        },
        
        //some dummy items to show the problem
        items: [
            {
                title: 'Tab1'
            },
            {
                title: 'Tab2'
            }
        ]
    });

[JanVenekamp]

Well this seems to be a problem for more than just the tabbar. The border config does not work as described in the docs. It seems you only can turn them on or off. Also you cannot specifiy sides like '1 0 0 1'.

[urlund]

I reported this almost a year ago, we now have ExtJS 4.1 and the bug still persist, no one has replied? And yes, I can confirm that is does not only apply to Ext.tab.Bar - but most (if not ALL) objects??

Someone please reply?

[evant]

You can do it:

Ext.require('*');

Ext.onReady(function() {
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 200,
        renderTo: Ext.getBody(),

        //this is the config that is being ignored
        tabBar: {
            border: 10,
            style: {
                borderColor: 'red',
                borderStyle: 'solid'
            }
        },

        //some dummy items to show the problem
        items: [{
            title: 'Tab1'
        }, {
            title: 'Tab2'
        }]
    });
});

The border config only sets the border width, it doesn't touch the colour/style.

[CasualNetworks]

I came across this... It's a documentation issue then, as the 4.1 docs show that a Ext.tab.Bar - Config for Border is in inherited from abstract component. It looks like within this class you have reused a property that has a different meaning on other components. The documentation should reflect that.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Bar-cfg-border

"Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'."