Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    48
    Vote Rating
    1
    urlund is on a distinguished road

      0  

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

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


    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:

    Code:
    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'
                }
            ]
        });

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    72
    Vote Rating
    0
    JanVenekamp is on a distinguished road

      0  

    Default


    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'.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    48
    Vote Rating
    1
    urlund is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,905
    Vote Rating
    626
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You can do it:

    Code:
    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2011
    Location
    Sacramento, CA
    Posts
    56
    Vote Rating
    0
    CasualNetworks is on a distinguished road

      0  

    Default


    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'."