1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    34
    Vote Rating
    0
    parasharsh is on a distinguished road

      0  

    Default Issue With Sencha CMD for generating images

    Issue With Sencha CMD for generating images


    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.

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    34
    Vote Rating
    0
    parasharsh is on a distinguished road

      0  

    Default


    Can someone please reply to this thread.

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

      0  

    Default


    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.

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,334
    Vote Rating
    129
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    First thing to check is the rendering of theme.html in Chrome. Does the ui you have created appear correctly there?
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

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

      0  

    Default


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

  6. #6
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,334
    Vote Rating
    129
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    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.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

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

      0  

    Default


    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.

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

      0  

    Default


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

    Code:
    @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?

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

      0  

    Default


    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:

    Code:
    $border-width: 4px !important
    Inside a
    Code:
    @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.

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

      0  

    Default


    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.

Thread Participants: 2