21 Jan 2013 3:31 AM #1
Issue With Sencha CMD for generating images
I have created an custom UI component similar to below
$background-gradient:color-stops(#333333, #262626 5%, #1A1A1A 100%),
$background-gradient-over: color-stops(#494949 0%,#303030 100%),
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
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.
21 Jan 2013 9:55 PM #2
Can someone please reply to this thread.
31 Jan 2013 9:38 PM #3
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.
31 Jan 2013 10:03 PM #4
First thing to check is the rendering of theme.html in Chrome. Does the ui you have created appear correctly there?
31 Jan 2013 10:07 PM #5
I've check Chrome, IE & FF, not rendering correctly in theme.html.
1 Feb 2013 12:28 AM #6
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.
1 Feb 2013 6:18 AM #7
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.
1 Feb 2013 8:46 AM #8
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 );
Border-radius, padding, and some other properties do appear to work.
What would stop border-width from working correctly?
1 Feb 2013 9:45 PM #9
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 !importantCode:
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.
20 Feb 2013 9:02 AM #10
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.