Styling Grid header, Panel Header and other Components independently

[Pat Emi]

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

[Fredric Berling]

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.

[Pat Emi]

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.

[Pat Emi]

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.

[cmeans]

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:

@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

[cmeans]

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.

[cmeans]

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

Is there a way to move it there?