1. #11
    Sencha Premium Member
    Join Date
    Jan 2013
    Location
    Atlanta, GA
    Posts
    1
    Vote Rating
    1
    twcarter is on a distinguished road

      1  

    Default missing resources creating custom theme

    missing resources creating custom theme


    I created a custom theme as described earlier and it seems there are missing resources/images after the build is complete.

    i did this from the root folder:
    sencha generate theme foo
    cd packages/foo
    sencha ant build
    -> point css in index.html to packages/foo/build/resources/foo-all-debug.css

    i am getting missing images (tree, grid, etc)
    original theme has 483 images, custom theme has 246

    update: if i run sencha package build, it works correctly

  2. #12
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    86
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      1  

    Default


    So I've followed along in this thread as best I can and have generated a theme that extends exte-theme-neptune. Easy enough.

    However, now I'm trying to figure out how to develop this theme like I've done prior to 4.2. Basically, I've been able to make changes in my theme's .scss files and run compass compile on the theme to update the theme. When I try this now, I get no results--no errors, but no changes in any of my theme's CSS files. When I do a full build, it works fine, but just not when I try to recompile SASS.

    So in 4.2, what's the suggested route to develop themes? I certainly can't be rebuilding the site for every change that needs to occur. I suspect I am missing something simple, but I don't see what it is in any of the threads I've read, nor in the any of the extant documentation.

    I appreciate any help that anyone can offer.

    Thanks!

  3. #13
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    Quote Originally Posted by existdissolve View Post
    So I've followed along in this thread as best I can and have generated a theme that extends exte-theme-neptune. Easy enough.

    However, now I'm trying to figure out how to develop this theme like I've done prior to 4.2.
    You should not need to rebuild the application or anything to build just the theme.

    To build your theme you can run the following command from your theme folder:

    Code:
       cd /path/to/myapp/packages/mytheme
       sencha package build
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

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

    "Use the source, Luke!"

  4. #14
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    86
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    Quote Originally Posted by dongryphon View Post
    You should not need to rebuild the application or anything to build just the theme.

    To build your theme you can run the following command from your theme folder:

    Code:
       cd /path/to/myapp/packages/mytheme
       sencha package build
    Hi Don--

    Thanks for the reply. I guess what I'm getting at is trying to understand the best and fastest way to rapidly develop a theme, specifically the recompilation of the .scss into CSS. I've been testing sencha package build and sencha ant sass, and each process takes approximately 40 seconds for the former, and at least 15 seconds for the latter. In previous versions, I could simply add a compass watch, and compilation would be immediate, and would not require an extra action.

    So before, my process was:
    • Set up compass watch (one-time, set and forget)
    • Modify .scss files
    • Reload app and see changes
    Now, my process is:
    • Modify .scss files
    • Run package build or ant sass manually
    • Wait for process to complete (between 10 and 50 seconds)
    • Reload app and see changes
    What I'm trying to understand is if there is a way to get back to the process that I used prior to 4.2. Having to manually run the build for each change (or batch of changes), and then wait 10-50 seconds does not lend itself to very rapid theme development.

    So is this modify/execute build/wait the only way to approach a theme, or is there an approach that will lend itself to the compass watch approach that was possible in previous versions?

    Thanks!

  5. #15
    Sencha User
    Join Date
    Jan 2010
    Posts
    2
    Vote Rating
    0
    zerosector is on a distinguished road

      0  

    Default


    Thanks a lot, it's adventage for me.

  6. #16
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    FYI - Ext JS 4.2 Theme Guide just posted - http://docs.sencha.com/ext-js/4-2/#!/guide/theming
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

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

    "Use the source, Luke!"

  7. #17
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

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

    "Use the source, Luke!"

  8. #18
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    Quote Originally Posted by existdissolve View Post
    Hi Don--

    So is this modify/execute build/wait the only way to approach a theme, or is there an approach that will lend itself to the compass watch approach that was possible in previous versions?

    Thanks!
    We plan to improve this but in 3.1.0 the production of the proper SASS importer file (the all.scss) requires some scanning and we just didn't have cycles to put that bow on the process... but we definitely plan to.

    If you are just changing the content of SCSS files (and not adding/removing them) you may be able to create a wrapper around the produced all.scss file in the build folder that compass watch can recompile. Not sure there - we are still evaluating the integration with watch so just a thought.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

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

    "Use the source, Luke!"

  9. #19
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    86
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    Quote Originally Posted by dongryphon View Post
    We plan to improve this but in 3.1.0 the production of the proper SASS importer file (the all.scss) requires some scanning and we just didn't have cycles to put that bow on the process... but we definitely plan to.

    If you are just changing the content of SCSS files (and not adding/removing them) you may be able to create a wrapper around the produced all.scss file in the build folder that compass watch can recompile. Not sure there - we are still evaluating the integration with watch so just a thought.
    Thanks for the clarification! Knowing that this is something that is coming someday is excellent, so I appreciate you letting me know.

    Thanks also for posting the guide--I'll definitely become acquainted with that for the other pieces. I'll also take a shot at the idea you suggested with the compass watch, and if I have success I'll post back here for others to see.

    Thanks again for the fast and helpful response!

  10. #20
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    mono blaine will become famous soon enough

      0  

    Default


    What if I have some custom css files, like "foo.css" and "bar.css" that are not related to any ExtJS component; how do I make them get included in the final "xxx-all.css" file during "sencha app build"?

    I suppose one way is to edit build.xml file as follows:

    Code:
    <target name="-after-build">
        <x-sencha-command>
            fs
            concatenate
                -from=${build.dir}/resources/xxx-all.css,${build.dir}/resources/css/foo.css,${build.dir}/resources/css/bar.css
                -to=${build.dir}/resources/css/xxx-all-debug.css
            and
             minify
                -yui
                -from=${build.dir}/resources/css/xxx-all-debug.css
                -to=${build.dir}/resources/css/xxx-all.css
        </x-sencha-command>
    </target>
    Is there any other better way to do this?

    edit: no no no no no no don't ever do this. all it does is outputting sh*t on the console window.