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
    464
    Vote Rating
    69
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      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
    DC Area =)
    Posts
    16,364
    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,695
    Vote Rating
    114
    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?