1. #1
    Sencha User
    Join Date
    Mar 2013
    Location
    Moscow, Russia
    Posts
    28
    Vote Rating
    0
    koutsenko is on a distinguished road

      0  

    Default Application-level SCSS without custom theme.

    Application-level SCSS without custom theme.


    Hello.
    Official theming guide explains how-to build custom application theme based on default one.

    But the one reason for custom theme is overriding default Ext-components look and feel.
    But only thing I need is add cfg::ui to Myapp-components and views only.

    Example:

    JS: \public\js\application\client\view\Mypanel.js
    Code:
    Ext.define('MyApp.view.Mypanel', {
        extend: 'Ext.panel.Panel',
    ...
        ui: 'myprettyui',
        frame: true,
    ...
    });
    SCSS: \public\sass\src\view\Mypanel.scss
    Code:
    @include extjs-panel-ui(
        $ui-label: 'myprettyui-framed',
        $ui-header-background-color: green,
        $ui-header-border-width: 0,
        $ui-border-color: green,
        $ui-body-border-color: green,
        $ui-border-width: 15px,
        $ui-border-radius: 15px
    );
    Running 'compass compile' causes an error:
    [exec] error sass/etc/all.scss (Line 9 of sass/etc/../src/view/mypanel.scss: Undefined mixin 'extjs-panel-ui'.)

    Maybe i must import something into my scss to resolve that error?
    Is it possible to use CSS Mixins in application-level SCSS?
    Thanks.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,115
    Vote Rating
    187
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default $ui-label: 'myprettyui-framed',

    $ui-label: 'myprettyui-framed',


    At first glance the setup seems right. What if you change
    $ui-label: 'myprettyui-framed',

    to

    $ui: 'myprettyui-framed',

    and run "sencha app refresh" > "sencha ant sass"?
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Location
    Moscow, Russia
    Posts
    28
    Vote Rating
    0
    koutsenko is on a distinguished road

      0  

    Default


    > What if you change $ui-label: 'myprettyui-framed' to $ui: 'myprettyui-framed' ?

    Why? An example here: http://docs.sencha.com/extjs/4.2.2/#!/guide/theming used $ui-label.
    Ok, I changed it, runs 'sencha app refresh && sencha ant sass', nothing changes:

    [INF] executing compass using system installed ruby runtime
    error all.scss (Line 9 of ../../sass/etc/../src/view/Mypanel.scss: Undefined mixin 'extjs-panel-ui'.)

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,115
    Vote Rating
    187
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    I just took another look at the path for your Mypanel class. What do you have as your appFolder for this application? By default it would be 'app'.


    *Also, if you're using ExtJS 4.2.1 or lower it will actually need to be ui-label for the Panel class. I looked in the API docs and it had 'ui', but I was in the docs for 4.2.2. In 4.2.1 and lower each class may use ui or ui-label and you'd have to look at the API docs to make sure you were using the right label key. In 4.2.2 and up the label key will be 'ui' and 'ui-label' will be deprecated, but will continue to work where it did before so in short - change that back to ui-label unless you're using 4.2.2.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Location
    Moscow, Russia
    Posts
    28
    Vote Rating
    0
    koutsenko is on a distinguished road

      0  

    Default


    * $ui-label - you're right, we're using 4.2.1 and latest 4.2.2 docs.

    > What do you have as your appFolder for this application? By default it would be 'app'.
    entry point js included in html: /js/application/client.js
    appFolder variable is set to: 'js/application/client'

    Yes it isn't default value. We planned two-part application (client, admin) and doesn't knew anything about Sencha Cmd. So, seems there is no automated way to add Sencha Cmd scaffold to existing ExtJS application. Currently, we just trying to use SCSS without Cmd-features. Only built-in Compass compiler. It's real:

    sencha compass compile --sass-dir ./sass/src --css-dir ./css/application/client

    But it fails if ExtJS mixins are included in custom ui-declarations in our .scss.
    Last edited by koutsenko; 28 Oct 2013 at 2:00 AM. Reason: typo

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,115
    Vote Rating
    187
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    With the application not being a Cmd generated app the compile statement to get the sass working like you're wanting will take a bit of trying as all of the options included from the Cmd build process natively would need to be incorporated.

    What I would suggest instead is either
    1) You make a separate temp Cmd workspace where you build your theme and export your compiled CSS from your custom src / var folders. This will work, but will generate a CSS file that has all of the rules for all components which has the potential to be more CSS than your app requires.

    2) You include the Cmd build scripts into your existing application which will let you do "sencha ant sass" or "sencha app build" and offer you UIs in a theme or in your application directly. The build process will also only include the style source required for your application.


    I can help walk you through either of these two options if you'd like. Which sounds like the better option to you?
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  7. #7
    Sencha User
    Join Date
    Mar 2013
    Location
    Moscow, Russia
    Posts
    28
    Vote Rating
    0
    koutsenko is on a distinguished road

      0  

    Default


    Slemmon, help me understand the 2nd way, please.

  8. #8
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,115
    Vote Rating
    187
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    Using Cmd 4 do the following:
    1)
    "sencha -sdk path/to/Sencha/lib generate app TempApp /path/to/temp/app"

    2)
    Copy the hidden .sencha folder from the generated TempApp over to your application's root folder.
    Also copy the app.json and build.xml files from TempApp to your application.

    3)
    If your index page is not index.html you can add the following to your app.json:
    Code:
    {
        ...
    
    
        "indexHtmlPath": "yourIndexPage.suffix"
    }
    4)
    In your index page you'll need to insert the following in the <head> section:
    Code:
    <!-- <x-compile> -->
        <!-- <x-bootstrap> -->
            <link rel="stylesheet" href="bootstrap.css">
            <script src="ext/ext-dev.js"></script>
            <script src="bootstrap.js"></script>
        <!-- </x-bootstrap> -->
    
    
        <script src="app.js"></script>
    <!-- </x-compile> -->
    ** With your appFolder being different from 'app' you will also need to set the following in .sencha/app/sencha.cfg:
    app.classpath=${app.dir}/js/application/client,${app.dir}/app.js

    ----- ----- -----

    With that in place you should be able to set up a custom theme for your application using the steps in the Theming Guide. The output css will ultimately be created using 'sencha app build' with the Cmd files in place.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  9. #9
    Sencha User
    Join Date
    Mar 2013
    Location
    Moscow, Russia
    Posts
    28
    Vote Rating
    0
    koutsenko is on a distinguished road

      0  

    Default


    Seems that helps, thanks. Our senior developer says he followed all those steps, but with a bit more little changes.

  10. #10
    Sencha User
    Join Date
    Mar 2013
    Location
    Moscow, Russia
    Posts
    28
    Vote Rating
    0
    koutsenko is on a distinguished road

      0  

    Default


    Seems that IE Slicer doesn't generate images properly.
    I tried to add in {appFolder}/sass/example/custom.js:

    Code:
    Ext.theme.addManifest( 
        { 
             xtype: 'widget.panel',
             ui   : 'southbar' 
        }
    );
    'southbar' is ui defined in MyPrettyClass.scss:
    HTML Code:
    .myPrettyClass {
        @include extjs-panel-ui(
            $ui: 'southbar',
            $ui-body-border-width: 0,
            $ui-body-background-color: red,
            $ui-border-radius: 5px,
            $ui-border-width: 5px,
            $ui-border-color: red
        );
    
        ... (some other component cls and ui's)
    }
    I tried to move panel mixin declaration to same namespace,
    /sass/src/Ext/panel/Panel.scss,
    HTML Code:
    @include extjs-panel-ui(
        $ui: 'southbar',
        $ui-body-border-width: 0,
        $ui-body-background-color: red,
        $ui-border-radius: 5px,
        $ui-border-width: 5px,
        $ui-border-color: red
    );
    All I get is more images sliced, in the first case and the second:
    [INF] Slicing complete - generated 241 images
    [INF] Slicing complete - generated 265 images

    So in the build\production\appName\resourcess\images\panel-header i got i new sliced gifs.

    But i still doesn't get a rounded corners panel in legacy IEs.

Thread Participants: 1