1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
    cswsteve is on a distinguished road

      1  

    Default Sencha Cmd 3.1.0.239 and ExtJS 4.2 theme questions using SASS

    Sencha Cmd 3.1.0.239 and ExtJS 4.2 theme questions using SASS


    It took a while to figure out some of the new theming changes in Sencha Cmd 3.1.0.239 compared to 3.0.2 but I still cannot figure out how to use SASS to customize the CSS like I did in 3.0.2. I had this all working perfectly in Ext JS 4.1 using Sencha Cmd 3.0.2 and a custom "app.scss" SASS file but this new version really changed things around and I cannot find much documentation on the new process.

    I realize everything changed to be based on packages to support multiple themes so I decided to start fresh to really understand the new process. I think I figured out all the steps to create and build a theme but I cannot figure out how to customize the various themes (classic, gray & neptune) in Ext JS 4.2. Here are the steps I am taking using Sencha Cmd 3.1.0.239.

    1. I created a new project to try and customize the Sencha Ext JS 4.2 themes. I am using Windows and create my projects in the default IIS folder. Here is the first command I run which creates a new project folder named SenchaThemes4.2.
      Code:
      sencha -sdk c:\inetpub\wwwroot\ext-4.2.0.663 generate app SenchaThemes4.2 c:\inetpub\wwwroot\SenchaThemes4.2
    2. Then I ran the following command to generate a new theme package named foo. This creates a new folder C:\inetpub\wwwroot\SenchaThemes4.2\packages\foo
      Code:
      sencha generate theme foo
    3. Lastly, I run the following command to build the foo theme package.
      Code:
      CD C:\inetpub\wwwroot\SenchaThemes4.2\packages\foo
      Code:
      sencha package build

    These 3 steps all run and execute fine. I see a new Build folder in my packages/foo folder where all the generated CSS and images are (foo-all.css, foo-all-debug.css, images, etc.). What I cannot seem to figure out is where all the SASS files went.

    I checked the foo\sass folder but the only scss file I could find was the all.scss in the foo\sass\etc folder. The problem is the all.scss file is blank when I open it. I tried copying my existing scss file data into the all.scss but that caused the "sencha package build" to fail.

    I also noticed the config.rb file in the foo\sass has only 2 lines compared to dozens in the file from 3.0.2.

    Which scss SASS file should I edit to customize the CSS?

    Also, how do I know which Theme I am customizing (classic, gray or neptune)?

    None of the online documentation is updated to explain this unless I am looking in the wrong place.
    http://docs.sencha.com/ext-js/4-2/#!.../command_theme

    Thanks in advance,
    Steve

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    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


    After you generate a theme, in the package directory there should be a sass/etc, sass/src and sass/var. Are your SASS files in them? I hadn't had a problem getting it the package to build.

    FYI, we are prepping the docs for when the Cmd 3.1 GA comes out for all of this.
    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
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
    cswsteve is on a distinguished road

      0  

    Default


    I see those 3 folders but the sass/var & sass/src only have a Readme.md file and no other files. The sass/etc has a Readme.md & all.scss file. The problem is the all.scss file is blank when I open it.

    I tried adding my SASS code from my previous app.scss file into the all.scss but then when I build I get errors.

    Should all of these folders have a default SASS file with some starting code in them?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    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


    No, they are blank directories (besides readme) as when you create a package it's a default package and that may or may not be a theme.
    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.

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
    cswsteve is on a distinguished road

      1  

    Default


    Is there any documentation or sample scss file to begin customizing a Theme via the new packages using SASS? In the previous version there was an app.scss file that included default SASS code like this.

    Code:
    @import 'ext4/default/all';
     
    // You may remove any of the following modules that you do not use in order to create a smaller css file.
    @include extjs-boundlist;
    @include extjs-button;
    @include extjs-btn-group;
    @include extjs-datepicker;
    @include extjs-colorpicker;
    @include extjs-menu;
    @include extjs-grid;
    @include extjs-form;
        @include extjs-form-field;
        @include extjs-form-fieldset;
        @include extjs-form-file;
        @include extjs-form-checkboxfield;
        @include extjs-form-checkboxgroup;
        @include extjs-form-triggerfield;
        @include extjs-form-htmleditor;
    @include extjs-panel;
    @include extjs-qtip;
    @include extjs-slider;
    @include extjs-progress;
    @include extjs-toolbar;
    @include extjs-window;
    @include extjs-messagebox;
    @include extjs-tabbar;
    @include extjs-tab;
    @include extjs-tree;
    @include extjs-drawcomponent;
    @include extjs-viewport;
    @include extjs-splitter;
    Has that changed or is it in another file somewhere? I am looking for the file I should use to maintain the SASS code for tweaking the CSS. For example, I previously customized the app.scss to include changes to other SASS files like this.

    Code:
    //Grid Row
    $grid-row-cell-over-background-color: $very_light_blue;
    $grid-row-cell-alt-background: $extremely_light_blue;
    
    //Button
    $button-default-background-gradient: 'glossy-button' !default;
    Where would I put this code in the new package theme format?

  6. #6
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    Having the same problem. My custom scss files which i placed in the theme package etc folder and included them are not interpreted and not in the mytheme.css

    So same question how to include custom scss in the theme package?

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    -1
    asti can only hope to improve

      -1  

    Default


    My theme extends ext-theme-access.

    Copy from there sass/etc,sass/src,/sass/var as 'london_lawyer' described in Thread Sencha CMD - Theme Creation/Editing #6

    for the grid-row change in: ..packages/mytheme/sass/var/panel/table.scss

  8. #8
    Sencha User mysticav's Avatar
    Join Date
    Mar 2007
    Location
    Mexico
    Posts
    478
    Vote Rating
    5
    mysticav is on a distinguished road

      0  

    Default


    mitchellsimoens,

    Where are you gonna announce the new documentation for CMD 3.1 & package management ?

    I need to customize Neptune. I don't want to mess around without official documentation.

    I guess lot of people is waiting for docs, as well.

    Any release date ?

    Thanks.
    Using Ext with cachefly
    Working on LAMPExt

  9. #9
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,404
    Vote Rating
    148
    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

      1  

    Default


    Heads down on the docs now.

    In a nutshell to the above questions, the structure of SASS src and var folders is class-oriented. If you check out ext-theme-neptune you will see it has things like this:

    ./sass/var/grid/plugin/RowExpander.scss
    ./sass/src/grid/plugin/RowExpander.scss

    The organization of these is an exact mirror of the JavaScript classes to which they apply. In this case "Ext.grid.plugin.RowExpander".

    There is a config variable for packages (called package.sass.namespace) and for apps (called app.sass.namespace) that determines the JavaScript namespace that corresponds to the top-level folder. In theme packages, "package.sass.namespace=Ext" is the default. This means we don't need an "Ext" folder in ./sass/var and ./sass/src. To theme at the global scope, you would need to set this var to blank and create folders starting at the global namespace.

    Looking in the first file we see just this:

    Code:
    $row-expander-margin: 3px 3px 3px 3px !default;
    $row-expander-height: 11px !default;
    $row-expander-width: 11px !default;
    The variables declared in ./sass/var are always "!default" by convention and they are ordered by the build such that the vars of more derived themes are included first and set the values they want. The app is the ultimate first comer and can set any var in its ./sass/var space.

    All files in var folders are included by "sencha package build" and "sencha app build" when building SASS. Within a package these files are ordered from base class to derived class as you might expect.

    The ./sass/src folder works similarly except that only the scss files for classes needed by the build (when building an app) are included. Within a package, these files are also included from base to derived order. Across packages, the base theme ./sass/src files come before those of the derived theme. This allows the cascade to always favor the derived theme.

    So you might see files like RowExpander.scss appear in many of the ./sass/var and ./sass/src across different themes. Each theme contributing its part. Obviously, if you have nothing to say about the variables or rules, you don't need to have a file in your theme.

    To carry forward more monolithic theme code without restructuring all the pieces to be class oriented, you can place your variables in ./sass/var/Component.scss or ./etc/all.scss (since that comes in even before vars) but vars is more appropriate for setting variables. You rules and other logic can go in ./sass/src/Component.scss as this will follow all of the base theme src such as its mixins.

    I hope this helps answer your questions. The Ext JS 4.2 RC1 release notes have some more on this - http://cdn.sencha.com/ext/gpl/4.2.0/release-notes.html.

    ... back to the guide smithing....
    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!"

  10. #10
    Sencha User mysticav's Avatar
    Join Date
    Mar 2007
    Location
    Mexico
    Posts
    478
    Vote Rating
    5
    mysticav is on a distinguished road

      0  

    Default


    Thanks a lot. Now I have a much better idea.
    Using Ext with cachefly
    Working on LAMPExt