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' 
                 }
             ]

Solution

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

Comments

[Sharon Watinsan]

Where should i add this CSS in the VIEW folder ?

[Mats Bryntse]

Does not matter, put it in any folder.