Style a button in EXTJS

Question

I have a button. and i need to align it to the right, make the font size increase and bold etc. When i googled it says i should use CSS.

How can i use CSS, to style the button that i added ?

My Question :

Where should i add the CSS file in my application, and how can i use it to style the button ?

items: [
                 {
                     xtype: 'button',
                     align: 'right',
                     text:'Assign' 
                 }
             ]

Mats Bryntse Mats Bryntse · Accepted Answer · 2012-07-14T08:22:32

items: [
                 {
                     xtype: 'button',
                     align: 'right',
                     text:'Assign',
                     cls : 'foo' 
                 }
             ]

And in a CSS file:

.foo { background:black; }

This adds a CSS class to the outer most element of the Button. There may be many elements involved in the DOM markup, so use Firebug to figure out which elements you want to style. More details in Ext docs: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-cls

Style a button in EXTJS

1 Answers