IE9 中的 extjs 4 主题化问题，网格栏颜色和按钮不会改变

Posted 2023-02-26

【中文标题】IE9 中的 extjs 4 主题化问题，网格栏颜色和按钮不会改变

【英文标题】：extjs 4 theming issues in IE9, gridbar color and buttons do not change

【发布时间】：2012-12-04 00:12:29

【问题描述】：

我有以下 sass 代码，当我编译它时，在 Firefox 和 chrome 中一切正常。 我唯一的问题是在 IE 中，与 Firefox 和 Chrome（蓝色）相比，网格栏的颜色是纯白色的。 有没有解决办法。我正在使用 extjs4。 这是我的变量代码

    $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

这是它在 IE 中的样子

【问题讨论】：

好吧，图像中的空白并不能真正帮助澄清问题。无论如何，这里同样的问题，当我找到解决方案时会回复

似乎是一些 css 特异性错误，在背景声明中添加一个 '!important' 对我来说是诀窍（我没有使用 ext js 的花哨的 sass 主题，所以对我来说是只是：.x-column-headerbackground:#717171 !important;

【参考方案1】：

从发布的屏幕截图来看，背景图像似乎没有针对网格标题进行切片。请注意，IE9 Ref 不支持 CSS3 渐变。请按照以下步骤调试您的图像切片器。

使用 Sencha cmd 通过“sencha app build”命令构建应用程序（如果你还没有这样做的话） 在控制台中验证您是否看到来自图像切片器的日志，包括“生成的 xxxx 图像” 如果您看到错误或“生成 0 个图像”，请验证主图像是否由 phantomjs 呈现。这可以通过检查build/&lt;<i>application name</i>&gt;/production 文件夹中是否有名为“theme-capture.png”的图像来完成。此图像应包含您所有样式化的组件 如果您没有看到这样的图像，则 phantomjs 没有呈现主题页面。在浏览器中查看 /&lt;<i>application name</i>&gt;/sass/example/theme.html 并确保它呈现所有自定义组件。这听起来可能不太正确，但事实是 Sencha CMD 正在将此 html 文件提供给 phantomjs 以生成主图像，然后由切片器切片以生成图像以支持旧版浏览器。