Applying Custom CSS or theme chnages

[cicts]

Can i change the look and feel of a component in extjs 4 , I am a newbie just trying my hands .
I want to change some of the styling of components like buttons

any ideas?

[sword-it]

Hi,

you can give custom css your Ext component as like:

    { 
                xtype: 'button'
                , text: 'Click Me!'
                , cls: 'buttonT'          //custom css 
          }

CSS:

 <style type="text/css">
        .buttonT{ background:red !important; border:solid 1px red !important; width:200px !important;}
    </style>

OUTPUT:

btna.png

[suzuki1100nz]

Hi,

When you've got through with trying to customize Sencha components using css overrides you could have a look at the theming guides for how to create a site themed your way.

have a look at. http://docs.sencha.com/ext-js/4-0/#/guide/theming

and http://docs.sencha.com/ext-js/4-0/#!/video/19159630

SASS and Compass are a fantastic tools and by simply changing some base variables you can change the look/color of an entire Sencha application.
The same toolset is used with the Sencha Touch framework.

We built an application and changed the $basecolor variable and it changed the color of 90% of the Sencha components.

All the best

[jay@moduscreate.com]

What ever you choose, be sure to use one way of formatting your code.