Results 1 to 7 of 7

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

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Answers
    7
    Vote Rating
    1
      0  

    Default 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
    Answers
    2
    Vote Rating
    0
      0  

    Default

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

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Answers
    7
    Vote Rating
    1
      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
    Answers
    7
    Vote Rating
    1
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #6
    Sencha User
    Join Date
    Nov 2013
    Posts
    49
    Answers
    1
    Vote Rating
    1
      0  

    Default thank you mitchell.

    It's helped me.

  8. #7
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2
    Vote Rating
    1
      0  

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •