Hybrid View

  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,073
    Vote Rating
    853
    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,073
    Vote Rating
    853
    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 User
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    -2
    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

  7. #7
    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?