Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Ext JS Premium Member SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    661
    Vote Rating
    39
    SebTardif has a spectacular aura about SebTardif has a spectacular aura about

      1  

    Default [4.2.0 RC] Not able to use compass in 4.2.x using the old file structures

    [4.2.0 RC] Not able to use compass in 4.2.x using the old file structures


    At http://cdn.sencha.com/ext/beta/4.2.0...ase-notes.html we can read:
    Creating themes can be accomplished in the old way by importing the "all.scss" file from the Ext JS theme.
    I understood from this, that I can still use "compass watch" with the same file structures I have been using in 4.1.x. Please note, that I don't need the slicer.

    But then, any attempt to "execute" my understanding fail fast. For example, in packages\ext-theme-classic\sass\all has a file called ext-all.scss, it contains these few lines:
    @import '../etc/all';
    @import '../var/all';
    @import '../src/all';

    But the files referenced by the imports don't even exist!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,644
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Have you tried with the GA release of 4.2.0?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    661
    Vote Rating
    39
    SebTardif has a spectacular aura about SebTardif has a spectacular aura about

      0  

    Default


    I have looked at GA/4.2.0.663, and /src/all doesn't exist.
    1. In Ext JS 4.2, using the new package mechanism or not, can we use "compass watch" or something equivalent, provided by Sencha Cmd or whatever?
    2. What the following quote from the release mean? "Creating themes can be accomplished in the old way by importing the "all.scss" file from the Ext JS them"

  4. #4
    Ext JS Premium Member
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    1
    r.binna is on a distinguished road

      0  

    Default


    I am having the same Problem. As my project cannot comply to the default project structure I was just trying to writing a script, which converts the new package structure into a compass extension (for extjs 4.2 beta versions prior to the new package structure this was easily doable).
    At the moment when trying to compile (as by the release notes suggested), it fails becaue all.scss under ext-theme-classic/sass/var/ is missing.
    Could you please provide the missing files or a tool within sencha command which allows to extract the old file structure.

  5. #5
    Ext JS Premium Member
    Join Date
    May 2010
    Location
    Wiesbaden
    Posts
    19
    Vote Rating
    0
    CSC-Germany is on a distinguished road

      0  

    Default


    The same here too.... further information on this would be appreciated!

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    12
    Vote Rating
    0
    tjcsencha is on a distinguished road

      0  

    Default


    Same here. Cannot compile my existing 4.1-based theme. I have my own file structure and was simply using compass compile in my build script. Now, after upgrading to 4.2, I get an error saying it cannot find the @imports in my main scss file. What info do you (Sencha) to help resolve this or is this a known issue where you'll be coming out with a fix or workaround. Thanks!

  7. #7
    Ext JS Premium Member SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    661
    Vote Rating
    39
    SebTardif has a spectacular aura about SebTardif has a spectacular aura about

      1  

    Default


    I finally figured this out.

    In the latest Ext JS 4.2.0 GA, you can find this entry point: C:\ext-4.2.0.663\packages\ext-theme-classic\build\ext-theme-classic-all-debug.scss

    This is the file that your application scss file need to reference like:
    app.scss
    ...
    @import 'ext-theme-classic-all-debug.scss';
    ...

    The ext-theme-classic-all-debug.scss will references lot of other scss files that come from Sencha, so you need many of the theme packages around, to simplify, you need the entire ExtJS zip file extract.

    In my custom config.rb I had to add:
    require File.join( $ext_path, 'packages/ext-theme-base/sass','utils.rb')

    The utils.rb file also come from ExtJS zip file.

    To be able to have a simple path to ext-theme-classic-all-debug.scss file in my app.scss I had to add the following to my config.rb:
    add_import_path File.join( $ext_path, 'packages/ext-theme-classic/build')

    I have been able to customize the location of images/css/sass and others using compass property in config.rb like the following:
    sass_path = File.dirname(__FILE__)
    css_path = File.join(sass_path, "..")
    image_path = File.join(sass_path, "../images")
    http_images_path = "images"

    But, ExtJS use a custom property called $relative-image-path-for-uis, I tried many things to configure it correctly, but I was not successful, so I had to align my configuration to work with the default behavior of that property.

    So I'm able to sass compile my sass file WITHOUT anything from Sencha Cmd.

    I like cross OS tool that I don't need to install, so I use a Maven plug-in that works everywhere and download what is needed to run compass:
    Code:
    <plugin>
                    <groupId>de.saumya.mojo</groupId>
                    <artifactId>gem-maven-plugin</artifactId>
                    <version>0.29.1</version>
                    <extensions>true</extensions>
                    <executions>
                        <execution> 
                            <id>default-cli</id>
                            <goals>
                                <goal>exec</goal>
                            </goals>
                            <configuration>
                                <execArgs>${project.build.directory}/rubygems/bin/compass watch ${basedir}/src/main/webapp/resources/sass</execArgs>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>

  8. #8
    Ext JS Premium Member
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    1
    r.binna is on a distinguished road

      0  

    Default


    Thanks for sharing your solution.

    I used a similar approach, by using a small bash script (shortened and stripped version is below).
    This script compiles a given extjs theme and copies the build images into an image folder. And all necessary sass sources into a compass folder which can be used as a compass extension.

    As mentioned in the previous post the ext-debug...scss can be found in the corresponding build folder.

    Code:
    #!/bin/sh
    export EXTJS_VERSION=4.2.0.663
    export EXTJS_SOURCE_FOLDER=~/Downloads/ext-${EXTJS_VERSION}
    export THEME_NAME=ext-theme-gray
    export EXTJS_TMP_DIR=/tmp/extjs-${EXTJS_VERSION}/tmp
    export STYLE_DEST_DIR=/tmp/extjs-${EXTJS_VERSION}/style
    export IMAGES_DEST_DIR=${STYLE_DEST_DIR}/images/${EXTJS_VERSION}
    export JS_DEST_DIR=${EXTJS_TMP_DIR}/js
    export EXTJS_DESTINATION_JS_DIR=/tmp/extjs-${EXTJS_VERSION}/js
    export COMPASS_EXTENSION_DIR=${STYLE_DEST_DIR}/compass/extensions/ext-${EXTJS_VERSION}
    
    
    
    
    if [ ! -d ${EXTJS_SOURCE_FOLDER} ]
    then
        echo "Given extjs source folder: ${EXTJS_SOURCE_FOLDER} does not exist"
        exit 1
    fi
    
    
    if [ -d ${EXTJS_TMP_DIR} ]
    then
        echo "Target directory: ${EXTJS_TMP_DIR} already exists"
        exit 1
    fi
    
    
    mkdir -p ${JS_DEST_DIR}
    cd ${EXTJS_SOURCE_FOLDER}
    cp -r cmd bootstrap.js build.xml *.js license.txt locale src ${JS_DEST_DIR}
    
    
    cd ${EXTJS_SOURCE_FOLDER}/packages/${THEME_NAME}
    sencha package build
    
    
    mkdir -p ${COMPASS_EXTENSION_DIR}/lib
    cp ${EXTJS_SOURCE_FOLDER}/packages/ext-theme-base/sass/utils.rb ${COMPASS_EXTENSION_DIR}/lib/ExtJs.rb
    mkdir -p ${COMPASS_EXTENSION_DIR}/stylesheets
    mkdir -p ${EXTJS_TMP_DIR}/themejs/
    cd ${EXTJS_SOURCE_FOLDER}/packages
    for x in $(ls |grep ext-theme)
    do 
        mkdir ${COMPASS_EXTENSION_DIR}/stylesheets/$x 
        cd $x
        cp -r sass ${COMPASS_EXTENSION_DIR}/stylesheets/$x/sass
        cp -r src ${EXTJS_TMP_DIR}/themejs/$x
        cd -
    done
    
    
    cd ${COMPASS_EXTENSION_DIR}
    for x in $(find . -name example -type d); 
    do
        rm -rf $x;
    done
    
    
    mkdir -p ${IMAGES_DEST_DIR}
    cp -r ${EXTJS_SOURCE_FOLDER}/packages/${THEME_NAME}/build/resources/images/  ${IMAGES_DEST_DIR} 
    
    
    cd ${COMPASS_EXTENSION_DIR}/stylesheets;
    for theme in $(ls |grep ext-theme)
    do
        cd $theme
        for x in $(grep -rl "\.\./" *)
        do
            sed -e "s#\.\./\.\./\.\./##g" -i "" $x
            #sed -e "s#\.\.#${theme}/sass#g" -i "" $x
        done
        cd -
    done
    For the image paths i batched theme-background-image.scss to use the default image_url function.

    Code:
    @function theme-background-image($originalPath, $extension: $image-extension, $nocheck: false) {
        $relative_image_path: ext_theme_relative_path($originalPath, $extension, 'ext-4.2.0.663/');
        $image_path: ext_theme_image($relative_image_path);
        @if $image_path { 
            @if $nocheck == true {
                @return url($image_path); 
            }
            @return image_url($relative_image_path);
    
    
           @warn "@theme-background-image: Theme image not found: $image_path";
           @if $include-missing-images {
               @return url($image_path);
           }
           @return none;
        }
        @else {
            @warn "@theme-background-image: No arguments passed";
        }
    }
    Furthermore i modified the ext_theme_image function and added the ext_theme_relative_path function in the util.rb to use images below the compass image folder. If you want to reference images outside the extjs folder for background images you can prefix the image url with nonext.

    Code:
    def ext_theme_relative_path(pathPart, extension, themeFolder)
        pathPart = pathPart.value
        extension = extension.value;
        themeFolder = themeFolder.value;
        path = "";
        if pathPart.start_with?("nonext/")
            path = pathPart[7..-1]
        else 
            path = 'ext-4.2.0.663/' + pathPart + '.' + extension;
        end
        Sass::Script::String.new(path)
    end
    
    def ext_theme_image(path, relative = false)
         path = path.value
         relative_path = compute_relative_path(Compass.configuration.images_path);
        Sass::Script::String.new(relative_path + "/" + path)
    end

  9. #9
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Cologne, Germany
    Posts
    13
    Vote Rating
    7
    stefan.lotties is on a distinguished road

      5  

    Default


    Quote Originally Posted by SebTardif View Post
    I finally figured this out.
    [...]
    I like cross OS tool that I don't need to install, so I use a Maven plug-in that works everywhere and download what is needed to run compass:
    Thank you so far.

    I just want to emphasise this point. I don't get why sencha is pushing their own build environment into our quick living and very open world. Some companies use ant, some use maven, others might even use grunt or makefiles. Why can't you keep it easy and let us use compass directly but (try to) force us using sencha cmd?

    I simply don't get this as it just makes everything more complicated. In 4.1 we invoked compass using jruby via maven, very similar to SebTardifs approach. Now you want me to tell all of my colleagues to install sencha cmd, how to use it, and make me install it on our build server? It's just a waste of time because we're using ExtJS since 1.0 and know how quickly you guys are in changing a whole lot of stuff. In ExtJS 5 everything could be, once again, completely different.

    Just my 2 cents ... I'm kind of pissed, as you might notice, sorry for that.

  10. #10
    Sencha User farion's Avatar
    Join Date
    Feb 2008
    Location
    Karlsruhe, Germany
    Posts
    75
    Vote Rating
    10
    farion will become famous soon enough

      0  

    Default


    Is there an official way to do this? I did not figure out how it works. I'm also afraid, that such a hacked solution will break again in a short time.

    It would be really nice to use compass like it was designed for.

    Regards
    Frieder