Hybrid View

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

      0  

    Default IE Slicer in application-level .scss without custom theme.

    IE Slicer in application-level .scss without custom theme.


    Cmd version tested:
    • Cmd 4.0.0.203
    • Cmd 4.0.1.45
    • Cmd 4.0.2.67
    Ext version tested:
    • Ext 4.2.2 rev 1144
    Browser versions tested against:
    • IE 11.0.9600.16428, Update Versions: RTM (KB2841134)
    DOCTYPE tested against:
    • !DOCTYPE HTML in index.html generated by Cmd
    Description:
    • SASS-styles with ui mixins doesn't slicing properly for legacy IE during sencha app build. I created new application "Bugreport" and changed default sass namespace to undefined, because i want to style components with both namespaces, Ext and Bugreport. Then, I write style for ExtJS panel using ui mixin. It works and looks right in modern browsers, but not in old IE. Older IE are emulating in IE11 with Developer Tools IE5-8 modes.
    Steps to reproduce the problem:
    • > sencha -sdk [path_to_extjs_framework] generate app bugreport bugreport
    • clear app.sass.namespace variable in \bugreport\.sencha\app\sencha.cfg (just remove 'bugreport' value)
    • append ui: 'bug', to west panel in \bugreport\app\view\Main.js
    • declare this ui in \bugreport\sass\src\Ext\panel\panel.scss
      Code:
      @include extjs-panel-ui(    $ui: 'bug',    $ui-body-border-width: 0,    $ui-body-background-color: red,   $ui-border-radius: 5px,    $ui-border-width: 5px,    $ui-border-color: red);
    • > sencha app build
    The result that was expected:
    • application with west panel and tabbar in the center
    • west panel with 'bug' ui has red background and rounded border
    The result that occurs instead:
    • west panel has no rounded border in IE < 9. See second attached image.
    Attached Images

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

      0  

    Default


    I think it's better to move that report to Cmd sub-forum

  3. #3
    Sencha - Support Team
    Join Date
    Mar 2012
    Location
    Lawrence, KS
    Posts
    281
    Vote Rating
    35
    greg.barry has a spectacular aura about greg.barry has a spectacular aura about

      1  

    Default


    Moved to Cmd Forums.

  4. #4
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      1  

    Default


    Have you added your custom UI to the manifest for sass/example/theme.html? Unless you do, Sencha Cmd won't know which UIs to generate images for. There's a guide on how to add your UI to the manifest in the "Slicing Images for CSS3 effects in IE" section of the theming guide.

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

      0  

    Default


    Yes. But there is no difference. In the case described above I've got a build-time message:
    [INF] Slicing complete - generated 241 images
    When adding a manifest in \sass\example\custom.js and rebuild:
    Code:
    Ext.theme.addManifest(
        {
            xtype: 'panel',
            ui: 'bug'
        }
    );
    I've got another message:
    [INF] Slicing complete - generated 265 images
    But no visual changes after browser cache clear and restart.

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

      0  

    Default


    I've read latest Release Notes for Sencha Cmd 4.0.2.67, seems similar bug is fixed:
    Code:
    Package (1)
    SDKTOOLS-634 sencha package build runs theme capture / slice phase for non-theme packages causing build to fail
    But how about slice phase for applications, when SASS are included in application folder /sass/src ?

Thread Participants: 2

Tags for this Thread