Threaded View

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


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

    Cmd version tested:
    • Cmd
    • Cmd
    • Cmd
    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
    • 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
      @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

Thread Participants: 2

Tags for this Thread