2 Attachment(s)
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:
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.