View Full Version : 'cls' not applying class on Button element

9 Sep 2014, 8:06 AM
Hi all,

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

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.

9 Sep 2014, 12:36 PM
It might be applied to the wrapper component element.

9 Sep 2014, 12:42 PM
Shouldn't that be the same element that the 'id' attribute gets applied to?

10 Sep 2014, 5:11 AM
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

10 Sep 2014, 7:04 AM
Right, but in my case the ID is being applied, but not the class.Here's the code for one of my buttons:

xtype: 'button',
cls: 'clientButton',
id: 'Client-0',
iconCls: 'icon_client_setting',
text: this.bundle.getMsg('client.setting'),
border: '1 0 1 1',
handler: function () {

And here's the DOM. Note that the outermost element has the ID, 'Client-0', but not the class, 'clientButton'.

10 Sep 2014, 7:15 AM
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)?

10 Sep 2014, 7:16 AM
Possibly - our application is pretty complex. I will see if I can reproduce it in a fiddle.