1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    0
    surajan is on a distinguished road

      0  

    Default Unanswered: extjs4 theming for roolbar does not work in IE

    Unanswered: extjs4 theming for roolbar does not work in IE


    I have the following sass code and when I compile it everything works fine in Firefox and chrome.
    The only problem I have is in IE where the toolbar color does to not change to the lighter color as compared to the Firefox and Chrome.
    Is there a solution to it. I am using extjs4.
    Here is my code for variables

    Code:
    
    $theme-name: 'slate';
    
    
    $color1: #abc;
    $color2: #3e546b;
    
    
    $include-missing-images: true;
    $base-color: $color1;
    $toolbar-background-color:$color1;
    
    
    
    
    //panel
    $panel-header-color: #fff;
    $panel-header-background-color: $color2;
    $panel-border-color: darken($color1, 5);
    
    
    //grid
    $grid-header-color: #fff;
    $grid-header-background-color: darken($color1,25);
    $grid-header-over-background-color: $color2;
    $grid-header-background-gradient: 'glossy';
    $grid-header-over-background-gradient: 'glossy';
    
    
    $grid-row-cell-alt-background: lighten($color1,20);
    $grid-row-cell-over-background-color: lighten($color1,10);
    $grid-row-cell-over-background-gradient: 'flat';
    $grid-row-cell-focus-background-gradient: 'flat';
    
    
    //window
    $window-background-color: $color1;
    
    
    //buttons
    $button-default-color: #fff;
    $button-default-base-color: $color2;
    $button-default-base-color-over: darken($color1,25);
    $button-default-base-color-pressed: darken($color1, 15);
    $button-default-background-gradient-over: 'glossy';
    $button-default-background-gradient-pressed: 'glossy';
    
    
    $button-toolbar-border-color-pressed: darken($color1,25);
    $button-toolbar-background-color-pressed: darken($color1,25);
    $button-toolbar-border-color-over: darken($color1,25);
    $button-toolbar-background-color-over: darken($color1, 5);
    $button-toolbar-background-gradient: null;
    $button-toolbar-background-gradient-over: 'glossy';
    $button-toolbar-background-gradient-focus: 'glossy';
    $button-toolbar-background-gradient-pressed: 'glossy';
    $button-toolbar-background-gradient-disabled: null;
    $button-toolbar-color: $color2 !default;
    $button-toolbar-color-over: #fff !default;
    $button-toolbar-color-pressed: #fff !default;
    
    
    //tabs
    $tab-height: 25px;
    
    
    $tab-base-color: $color1;
    $tab-background-gradient: null;
    $tab-base-color-over: darken($color1, 10);
    $tab-base-color-active: $color2;
    $tab-color-active: #fff;
    
    
    $tabbar-strip-background-color: $color2;
    
    
    //progress bar
    $progress-bar-background-color: darken($color1,25);
    
    
    //fieldsets
    $fieldset-border-color: $color2;
    
    
    //datepicker
    $datepicker-header-background-color: $color2;
    $datepicker-header-background-gradient: 'glossy';
    $datepicker-today-item-background-color: $color1;
    $datepicker-today-item-border-color: $color2;
    
    
    $datepicker-th-background-color: $color1;
    $datepicker-th-color: $color2;
    $datepicker-th-border-bottom-color: $color2;
    $datepicker-item-color: #000;
    $datepicker-item-hover-background-color: lighten($color1, 15);
    $datepicker-selected-item-border-color: $color2;
    $datepicker-selected-item-background-color: $color1;
    $datepicker-monthpicker-item-color: #fff;
    
    
    //layout
    $accordion-header-color: $color2;
    $accordion-header-background-color: $color1;
    
    
    
    
    @import 'ext4/default/all';
    
    
    // You may remove any of the following modules that you
    // do not use in order to create a smaller css file.
    
    
    @include extjs-boundlist;
    @include extjs-button;
    @include extjs-btn-group;
    @include extjs-datepicker;
    @include extjs-colorpicker;
    @include extjs-menu;
    @include extjs-grid;
    @include extjs-form;
        @include extjs-form-field;
        @include extjs-form-fieldset;
        @include extjs-form-file;
        @include extjs-form-checkboxfield;
        @include extjs-form-checkboxgroup;
        @include extjs-form-triggerfield;
        @include extjs-form-htmleditor;
    @include extjs-panel;
    @include extjs-qtip;
    @include extjs-slider;
    @include extjs-progress;
    @include extjs-toolbar;
    @include extjs-window;
    @include extjs-messagebox;
    @include extjs-tabbar;
    @include extjs-tab;
    @include extjs-tree;
    @include extjs-drawcomponent;
    @include extjs-viewport;
    
    
    // This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
    // You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
    // This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
    // The value can either be true, in which case the image path will be "../images/"
    // or a string, of where the path is
    $relative-image-path-for-uis: true; // defaults to "../images/" when true

  2. #2
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    0
    surajan is on a distinguished road

      0  

    Default


    Here is the solution I just found in this forum that worked for the tool bar. But i.
    But the grid bar shows white color in IE . I dont have a fix for that

    Just found a workaround at least...

    Using the IE Dev Tools I found, that my own css declarations get overriden by some Ext declarations.
    When deleting these lines - IE is styling the toolbar as desired... sideeffects not yet checked!

    PHP Code:
    /* line 151, ../themes/stylesheets/ext4/default/widgets/_toolbar.scss */
    .x-nlg .x-toolbar-default {
    background-image: url('../../resources/themes/images/gray/toolbar/toolbar-default-bg.gif') !important;
    background-repeat: repeat-x; }


    to be found on line 6670 in ext-all-gray-debug.css

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    0
    surajan is on a distinguished road

      0  

    Default


    I have a screen shot of how it looks in IE and chrome.
    The one in chrome should be the correct one.
    Any help would be appreciated.
    Thanks.
    Attached Images

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    41
    Answers
    6
    Vote Rating
    2
    sriram139 is on a distinguished road

      0  

    Default


    Try setting the config 'ui' as blank, which will make sure that .x-nlg .x-toolbar-default doesnt get applied to your toolbar.

    Code:
    Ext.define('MyToolbar', {
        extend : 'Ext.toolbar.Toolbar',
        ...
        alias : 'widget.mytoolbar',
        ...
        ui: ''
    });
    Thanks,
    Sriram

Thread Participants: 1

Tags for this Thread