Issue With Sencha CMD for generating images

[parasharsh]

Hi,
I have created an custom UI component similar to below
@include extjs-button-ui(
'primarytab-toolbar-medium',
$background-color:#444444,
$background-color-over:#555555,
$background-gradient:color-stops(#333333, #262626 5%, #1A1A1A 100%),
$background-gradient-over: color-stops(#494949 0%,#303030 100%),
$color:#CCCCCC,
$color-over:#FFF,
$color-disabled:#CCCCCC,
$font-weight:bold,
$font-family: $font-family,
$font-family-over: $font-family
);

I generated CSS using the sencha cmd which looks fine. Now I need to create images for supporting IE 8.
I added an entry in the custom.js as below
{
xtype: 'widget.button',
ui: 'primarytab-toolbar-medium'
}

Ideally an image with name as 'btn-primarytab-toolbar-medium-bg.gif' should be generated. But the images generated is btn-primarytab-toolbar-medium-medium-bg.gif . Also the image generated is not having proper gradient.

[parasharsh]

Can someone please reply to this thread.

[cmeans]

I'm having the same problem. The gradient image being generated isn't using the right colors etc.. Though the file names appear to be correct.

[dongryphon]

First thing to check is the rendering of theme.html in Chrome. Does the ui you have created appear correctly there?

[cmeans]

I've check Chrome, IE & FF, not rendering correctly in theme.html.

[dongryphon]

The theme.html file need only render properly in Chrome/WebKit as Cmd uses that rendering engine to do the image slicing.

I would first figure out what is causing the rendering of theme.html to be incorrect in Chrome. Once that is working, slicing should work.

[cmeans]

OK.

As many of the other settings in the custom button UI seem to be working correctly, can you verify that the entry for the background-gradient is constructed correctly? (Can you point me to the documentation for creating gradients in this context?)

Could you run a test with a custom theme yourself to confirm that it's working correctly for you? (This would confirm that it's not a bug/issue in or with the Sencha/Compass components themselves.)

Documentation seems to be a bit of a hodge-podge at the moment, so this had been a slog.

Thanks.

[cmeans]

Event something simple as this isn't rendering correctly in Chrome (theme.html):

@include extjs-button-ui(
    'test-small', 

    $border-color: green,
    
    $border-width: 4px,
    
    $icon-size: 16px
);

The border color is rendered correctly, but the border width stays at 1.
Border-radius, padding, and some other properties do appear to work.

What would stop border-width from working correctly?

[cmeans]

OK, so the problem with border-width is that we need to include !important in the CSS declaration otherwise it won't override the existing setting (this should be fixed).

However, we can't use:

$border-width: 4px !important

Inside a

@include extjs-button-ui

because then the includes' logic is broken due to an internal value comparison which is broken by the presence of the !include. This should also be addressed as it seems like it might come up as an issue in the future.

But really, these issues should be documented so that numb-nuts like me will assume an entry is fine to use...I can't imagine this issue is a surprise to more experienced ExtJS developers.

However, none of this addresses the background-gradient issue. Adding !important didn't seem to make a difference in the emitted CSS so the CSS for theme.html is still not being generated correctly.

[cmeans]

I could really use some help figuring out why Chrome isn't rendering correctly. No one has replied that they can show that it is working out of the box...so if this is a bug in Sencha Cmd I'd rather know that rather than keep spinning my wheels.