9 Jan 2014 2:16 AM #1
IE Slicer in application-level .scss without custom theme.
Cmd version tested:
- Cmd 18.104.22.168
- Cmd 22.214.171.124
- Cmd 126.96.36.199
- Ext 4.2.2 rev 1144
- IE 11.0.9600.16428, Update Versions: RTM (KB2841134)
- !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.
- > 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.scssCode:
@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
- application with west panel and tabbar in the center
- west panel with 'bug' ui has red background and rounded border
- west panel has no rounded border in IE < 9. See second attached image.