1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33
    Vote Rating
    0
    Pat Emi is on a distinguished road

      0  

    Default Unanswered: Styling Grid header, Panel Header and other Components independently

    Unanswered: Styling Grid header, Panel Header and other Components independently


    Hi,
    Please i want to style my components independently, but i can't seem to override the extjs css.
    I have used componentCls, cls and bodycls but none is working.

    I actually wanted to use theming but some certain reasons i avoided it, reasons are; first is that when i compile in sass it doesn't load the necessary images, so when i add it to my project the components lack beauty, looks like certain things are missing.
    secondly, i am only using grid, panel toolbar, button and a viewport, and so i thought why use theme when the components are not much.

    Please i need an urgent reply, i don't want ext default color and i want to override it.
    How can i do this.

    Thanks.
    Pat

  2. #2
    Sencha Premium Member Fredric Berling's Avatar
    Join Date
    Sep 2007
    Location
    Sweden
    Posts
    186
    Answers
    4
    Vote Rating
    15
    Fredric Berling has a spectacular aura about Fredric Berling has a spectacular aura about

      0  

    Default


    I would strongly recommend getting the compass and sass stuff working. It does work. I use it all the time

    After that i would look at the "ui" config of the Components you like to style. There are Mixins that lets you create different look for specific instances of a component.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33
    Vote Rating
    0
    Pat Emi is on a distinguished road

      0  

    Default


    Thanks Fredric.........but i am using sass and compass already. like i said before, images are not attached to the compiled css and so when i attach the css to my project the color comes out but it's not beautiful.. i mean no gradient and the button is not ok.
    But i felt it's because the images where not found.
    I went back to look for help and i found something about sencha slice, i also tried it but nothing. I guess i might be using it wrongly.
    Please is there a way around it because i'm already using sass but the images are not found.

    Thanks.

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33
    Vote Rating
    0
    Pat Emi is on a distinguished road

      0  

    Default


    Please i still need help concerning this post.
    I went back to using sass but while compiling images are not found. please what' the best method to do this?
    Thanks in advance.

  5. #5
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    112
    Answers
    3
    Vote Rating
    7
    cmeans is on a distinguished road

      0  

    Default


    I'm having the same issue with a custom panel ui.

    I've had success with technical support on this forum in the past, so I'd imagine the more information we can provide to help target the problem, the faster we'll get the help we need.

    To that end...

    ExtJS v4.1.3
    Sencha Cmd v3.0.2.288

    My app.scss has the ui built as:

    Code:
    @include extjs-panel-ui(
        'control',
    
        $ui-border-radius: 1px, 
        $ui-border-color: null, 
        $ui-header-color: white, 
        $ui-header-font-size: $window-header-font-size, 
        $ui-header-font-weight: $window-header-font-weight, 
        $ui-body-border-color: null, 
        $ui-body-background-color: white, 
        $ui-body-color: null,
        $ui-header-background-color: #3668AF,
        $ui-header-background-gradient: gradient(#3668AF, #3668AF)
    );
    I get the styling I expect for FF v20.0.1 (I assume it's using CSS3), however for IE9, I'm seeing some changes, but the header panel background isn't right in collapsed mode.

    I'm seeing requests for 2 files that "compass" apparently hasn't generated:

    /Demo/resources/ptv/images/panel-header/panel-header-control-top-bg.gif
    /Demo/resources/ptv/images/panel-header/panel-header-control-left-bg.gif

    Where "Demo" is the project name, and "ptv" is the theme name.

    -Chris

  6. #6
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    112
    Answers
    3
    Vote Rating
    7
    cmeans is on a distinguished road

      0  

    Default


    It's worth mentioning that the theme.html appears to be rendering fine in Chrome, so I think the build process is OK, so I assume this means there's an issue in the process that creates the backward-compatibility graphics.

  7. #7
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    112
    Answers
    3
    Vote Rating
    7
    cmeans is on a distinguished road

      0  

    Default


    I think this thread would be served better in the Sencha Cmd forum.

    Is there a way to move it there?

  8. #8
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    394
    Vote Rating
    4
    wemerson.januario is on a distinguished road

      0  

    Default


    Quote Originally Posted by cmeans View Post
    I'm having the same issue with a custom panel ui.

    I've had success with technical support on this forum in the past, so I'd imagine the more information we can provide to help target the problem, the faster we'll get the help we need.

    To that end...

    ExtJS v4.1.3
    Sencha Cmd v3.0.2.288

    My app.scss has the ui built as:

    Code:
    @include extjs-panel-ui(
        'control',
    
        $ui-border-radius: 1px, 
        $ui-border-color: null, 
        $ui-header-color: white, 
        $ui-header-font-size: $window-header-font-size, 
        $ui-header-font-weight: $window-header-font-weight, 
        $ui-body-border-color: null, 
        $ui-body-background-color: white, 
        $ui-body-color: null,
        $ui-header-background-color: #3668AF,
        $ui-header-background-gradient: gradient(#3668AF, #3668AF)
    );
    I get the styling I expect for FF v20.0.1 (I assume it's using CSS3), however for IE9, I'm seeing some changes, but the header panel background isn't right in collapsed mode.

    I'm seeing requests for 2 files that "compass" apparently hasn't generated:

    /Demo/resources/ptv/images/panel-header/panel-header-control-top-bg.gif
    /Demo/resources/ptv/images/panel-header/panel-header-control-left-bg.gif

    Where "Demo" is the project name, and "ptv" is the theme name.

    -Chris
    I have this same problem extjs 4.2.2 i cant see the style in collapsed panel mode
    Wemerson Januario
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 84101145 - Goiânia-GO- Brazil
    Consulting and Training Ext JS
    Projects: (Nubes ERP)