Results 1 to 10 of 33

Thread: Sencha Cmd 3.1.0.239 and ExtJS 4.2 theme questions using SASS

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
      1  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
      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
    -1
      -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 Premium User mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    693
    Vote Rating
    12
      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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •