1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    cicts is on a distinguished road

      0  

    Default Applying Custom CSS or theme chnages

    Applying Custom CSS or theme chnages


    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?

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    you can give custom css your Ext component as like:

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

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

    btna.png
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    447
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    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

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    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


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

  5. #5
    Sencha User
    Join Date
    May 2013
    Posts
    1
    Vote Rating
    0
    harshag7 is on a distinguished road

      0  

    Default


    Hi,
    I am newbie to ExtJs and was looking for all the available styles for a component.
    Say for example I need to find all the styles available for Ext.panel.Panel, where do I get it from?
    Did not see styles in Ext JS documentation.
    http://docs.sencha.com/extjs/4.1.0/#...xt.panel.Panel

    Please help!

  6. #6
    Sencha Premium Member tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    1)
    workspace/ext/packages/ext-theme-classic/sass/var/panel/Panel.scss (depending on your theme)

    2)
    workspace/ext/packages/ext-theme-base/sass/src/panel
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  7. #7
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
    93till is on a distinguished road

      0  

    Default


    Quote Originally Posted by tobiu View Post
    1)
    workspace/ext/packages/ext-theme-classic/sass/var/panel/Panel.scss (depending on your theme)

    2)
    workspace/ext/packages/ext-theme-base/sass/src/panel
    Do we have to use sass, I'm not too sure about working with this?