1. #1
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    1
    hhedlund is on a distinguished road

      0  

    Exclamation Problems building themes

    Problems building themes


    ExtJS version: 4.2.0.489
    Sencha Cmd version: 3.1.0.130


    I'm trying out the new 4.2 RC and I'm having three issues relating to the new theming system:

    1) Whenever I try to build the app using sencha app build (using a vanilla build configuration), the resulting app-all.css file is "empty" - not really empty, but it simply contains these comments:

    Code:
    /**
     * @class Global_CSS
     *
     * Global CSS variables and mixins of Ext JS.
     */
    /**
     * Creates a background gradient.
     *
     * @param {Color} $bg-color The background color of the gradient
     * @param {String/List} [$type] The type of gradient to be used. Can either
     * be a String which is a predefined gradient, or it can can be a list of
     * color_stops. If none is set, it will still set the `background-color`
     * to the $background-color.
     * @param {String} [$direction=top] The direction of the gradient. Can either be
     * `top` or `left`.
     * @member Global_CSS
     */
    /*
     * Method which inserts a full background-image property for a theme image.
     * It checks if the file exists and if it doesn't, it'll throw an error.
     * By default it will not include the background-image property if it is not found,
     * but this can be changed by changing the default value of $include-missing-images to
     * be true.
     */
    Nothing else, so the app is completely unstyled...


    2) Whenever I try to build a theme package using sencha package build, it fails on "Capturing theme image":

    Code:
    [INF] Capturing theme image
    [ERR] 
    [ERR] BUILD FAILED
    [ERR] com.sencha.exceptions.ExProcess: phantomjs process exited with code 2 : 
    [ERR] loading page <Path To App>/packages/symfoni/build/example/theme.html
    [ERR] == Unhandled Error ==
    [ERR] ReferenceError: Can'''''''''t find variable: Ext
    [ERR] 
    [ERR]   file:////<Path To App>/packages/ext-theme-base/sass/example/render.js:22
    It doesn't matter if I try building a new custom theme, or one of the standard one - the results are the same..


    3) If i try to change the default theme in .sencha/app/config.cfg, for example setting it to use neptune:

    Code:
    app.theme=ext-theme-neptune
    Then sencha app refresh simply dies with the following, not-so-enlightening, error message:

    Code:
    Sencha Cmd v3.1.0.130
    [ERR] null
    Can anyone shed any light on what might possibly be wrong with my setup?

    Best regards,
    Henrik

  2. #2
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    1
    hhedlund is on a distinguished road

      0  

    Default First issue resolved...

    First issue resolved...


    Well, I've resolved the first issue at least.. I had the app.js file in my app root directory (as opposed to the normal Sencha Cmd location app/app.js) - the way that Sencha Architect likes to store it.

    I never really understood why Architect insists on storing the app.js in a "non-standard" way, but the 3.0 version of Cmd could cope with it at least..

    One down, two more to go...

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    1
    hhedlund is on a distinguished road

      0  

    Thumbs up Third one solved..

    Third one solved..


    And the third issue is solved as well - I needed to make sure app.json required the theme package that I needed. Quite obvious really, but the error message produced could be vastly improved..

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    1
    hhedlund is on a distinguished road

      1  

    Cool Second, and last one, solved..

    Second, and last one, solved..


    The second one was due to the file <theme folder>/sass/example/theme.html. It contains a link to ExtJS that looks like:

    Code:
    <script type="text/javascript" src="/ext-all-debug.js"></script>
    For my setup, I simply updated it to:

    Code:
    <script type="text/javascript" src="../../../../ext/ext-all-debug.js"></script>
    Also worth noting as that when you generate a new theme (using sencha generate package), the file <theme folder>/sass/config.rb is missing so you have to manually copy that from one of the bundled themes..

    //H

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    3
    mbudm is on a distinguished road

      0  

    Default


    Thanks for all that Henrik - I ran into similar problems.

    Did you play with adding mods to you generated theme? That's where I'm stuck now, nothing I add to the sass folders seems to create anything in the css output.

    I've tried adding an all folder like ext-theme-gray and ext-theme-access that imports the other folders in the directory:

    <theme folder>/sass/all/all.scss

    Code:
    @import '../etc/all';
    @import '../var/all';
    @import '../src/all';
    and I've put in a Component.scss with different colors into

    <theme folder>/sass/vars

    When I do sencha ant sass it looks like my theme is being included in the css generation process:

    Code:
    [INF] -sass:
    [INF] Loading configuration from C:\work\ies_web_apps\ies_expert_app
    [INF] Compiling page page
    [INF] Loading classpath entry C:\work\ies_web_apps\ext\src
    [INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-base\overrides
    [INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-base\src
    [INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-neutral\overrides
    [INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-neutral\src
    [INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-neptune\overrides
    [INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-neptune\src
    [INF] Loading classpath entry C:\work\ies_web_apps\packages\[Theme Folder]\overrides
    [INF] Loading classpath entry C:\work\ies_web_apps\packages\[Theme Folder]\src
    [INF] Loading classpath entry C:\work\ies_web_apps\ies_expert_app\app
    [INF] Loading classpath entry C:\work\ies_web_apps\ies_expert_app\sencha-compile-temp-dir\2107d557-04a0-4919-aebb-adda61c9ac41
    [INF] generating sass for js compile context
    [INF]
    [INF] -after-sass:
    But there are no changes in the css output.

  6. #6
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    3
    mbudm is on a distinguished road

      0  

    Default


    Ok I got it. I can't use sencha ant sass any more to create the css. I need to use sencha app build or sencha package build from within the theme package folder.

    Edit: sencha app refreshis definitely a better option
    Last edited by mbudm; 24 Feb 2013 at 9:22 PM. Reason: recommend sencha app refresh instead

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    1
    hhedlund is on a distinguished road

      0  

    Default


    Hey,
    Great that my discoveries could help someone..

    And good that you resolved your problem.. I've been using sencha ant sass theme myself, I wonder which one is better; refresh or theme.. I guess I'll have to run some tests and see if one option is quicker than the other (building the theme is painfully slow for me)..

    //H

  8. #8
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    3
    mbudm is on a distinguished road

      0  

    Default


    Yes I do sorely miss

    compass watch


Thread Participants: 1

Tags for this Thread