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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi