1. #1
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

    Default Unanswered: 'cls' not applying class on Button element

    Unanswered: 'cls' not applying class on Button element


    Hi all,

    I have some buttons that I'm trying to apply a CSS class to, so I'm using the 'cls' config:

    Code:
    {
      xtype: 'button',
      id: 'Client-2', 
      iconCls: 'icon_client_program', 
      cls: 'clientButton', 
      text: this.bundle.getMsg('client.program'), 
      border: '0 0 1 1' 
    }
    However, when the page is rendered, the top-level div of the button does not have the clientButton CSS class. Any idea why the class would not get applied? I tried componentCls as well, and that didn't work either.

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Answers
    102
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    It might be applied to the wrapper component element.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

    Default


    Shouldn't that be the same element that the 'id' attribute gets applied to?

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Answers
    102
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    no. it's not designed that way.
    The ID and Cls properties get applied to the wrapper element for the component. That's how it has been designed since Ext JS 1.0 :P

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

    Default


    Right, but in my case the ID is being applied, but not the class.Here's the code for one of my buttons:

    Code:
                    
    {
        xtype: 'button',
        cls: 'clientButton',
        id: 'Client-0',
        iconCls: 'icon_client_setting',
        text: this.bundle.getMsg('client.setting'),
        border: '1 0 1 1',
        handler: function () {
            switchClientForm(0);
        }
    }
    And here's the DOM. Note that the outermost element has the ID, 'Client-0', but not the class, 'clientButton'.
    button.jpg

  6. #6
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Answers
    102
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Looks like you have some implementation that is overriding the cls, adding "select_btn" to the CSS and possibly replacing "clientButton" or something.


    Can you replicate this in a sandbox (senchafiddle.com)?

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

    Default


    Possibly - our application is pretty complex. I will see if I can reproduce it in a fiddle.

Thread Participants: 1

Tags for this Thread