Results 1 to 7 of 7

Thread: Applying Custom CSS or theme chnages

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default 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 User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Vote Rating
    91
      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
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    714
    Vote Rating
    236
      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 User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    87
      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
      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 User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,748
    Vote Rating
    128
      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

  7. #7
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
      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?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •