1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Vote Rating
    1
    Answers
    7
    jonathansimmons is on a distinguished road

      0  

    Default Answered: Assign a class to a specific Tab Panel's Tab

    Answered: Assign a class to a specific Tab Panel's Tab


    I have a Tab Panel with 5 tabs. For this panel I have a custom css style on the middle tab making it look different from the other 4 tabs (a common practice in iOS design). This has all worked well but recently I've realized if I destroy that panel and recreate it my current css targeting is not specific enough.

    So my goal is to give that specific tab a css class or ID so I better target it ensuring that the style is applied each time regardless of how the tabpanel is instantiated or how many tabs it has.

    Anyone know how to do this? Currently I have this
    Code:
    Ext.define("STMobile.view.Home", {
        extend: 'Ext.tab.Panel',
            xtype: 'home',
        requires: [
                'Ext.TitleBar', 
                'Ext.TabBar', 
                'STMobile.view.Cases.Index',
                'STMobile.view.Requests.Index',
                'STMobile.view.Add.Index',
                'STMobile.view.Toolsets.Index',
                'STMobile.view.More.Index',
                'Ext.Img'
            ],
        
        config: {
                id: 'Home',
          tabBarPosition: 'bottom',
                layout: {
                    animation: null
                },
                activeItem: 0,
          items: [
                    {
                        xtype: 'casesindex'
                    },
                    {
                        xtype: 'requestsindex'
                    },
                    {
                        xtype: 'addindex',
                                            cls: 'specialTab',
                    },
                    
                    {
                        xtype: 'toolsetsindex'
                    },
                    {
                        xtype : 'moreindex'
                    }
          ]
        }
    });

    However this just adds the class of "specialTab" to the actual panel that this tab activates. Not the tab itself.

  2. Each item should be able to accept a tab config...

    Code:
    new Ext.tab.Panel({
        items : [
            {
                title : 'foo',
                tab   : {
                    cls : 'blam'
                }
            }
        ]
    });

  3. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    31
    Vote Rating
    0
    Answers
    2
    master_obiwan is on a distinguished road

      0  

    Default


    Code:
    {
          xtype: 'casesindex',
          iconCls:'your_class_name'
    }

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Vote Rating
    1
    Answers
    7
    jonathansimmons is on a distinguished road

      0  

    Default


    This does not achieve my goal. This simply sets the value for the icon that will display. I am looking to add a unique selector to the tab itself.

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Vote Rating
    1
    Answers
    7
    jonathansimmons is on a distinguished road

      0  

    Default


    This has to be possible. Sencha is creating the tab. There has got to be a way to give it a class or specific id. Anyone?

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    Answers
    3573
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Each item should be able to accept a tab config...

    Code:
    new Ext.tab.Panel({
        items : [
            {
                title : 'foo',
                tab   : {
                    cls : 'blam'
                }
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #6
    Sencha User
    Join Date
    Nov 2013
    Posts
    49
    Vote Rating
    1
    Answers
    1
    anilvardhan.p is on a distinguished road

      0  

    Default thank you mitchell.

    thank you mitchell.


    It's helped me.

  8. #7
    Sencha User
    Join Date
    Nov 2013
    Posts
    33
    Vote Rating
    0
    MarcoScherer is on a distinguished road

      0  

    Default


    Yeah, exactly what I was looking for! Didn't find that tab attribute in the docs. Thanks!