ExtJS4太优雅...需要帮助ie8组件渲染 [英] ExtJS4 too graceful... Need help ie8 component rendering

问题描述

我正在使用ExtJS4应用程序 - 自定义报告应用程序。

I am working on an ExtJS4 application - custom reporting application.

ExtJS4使用可怕的降序原则，通过自动将所有css3与图像和表（修改后的标记） 。因为这样做，可怕的膨胀已经膨胀的标记，并使用默认图像更改所有渐变/边框。

ExtJS4 uses terrible graceful degradation principles by automatically falling back all css3 with images and tables (modified markup). Because of this it horribly bloats the already bloated markup and changes all of the gradients / borders with default images.

我不知道除了css3元素之外还有什么变化，但是这里是应用截图。

I am not sure what else it changes besides css3 elements, but here are the app screenshots.

这是IE8：

这是Google Chrome：

...

1. 除了必须检查所有的标记和撤消这些可怕的设计决定


2. 除了重新创建所有的图像以匹配现有的设计


3. 除了必须修改核心文件以强制优雅退化不发生在不支持x-nlg，x-nbr等浏览器。

1. Besides having to inspect all of the markup and undoing these terrible design decisions
2. Besides having to recreate all of their images to match the existing design
3. Besides having to modify the core files to force graceful degradation NOT to happen for browsers that do not support x-nlg, x-nbr, etc.

更新2012-11-23

Sencha切片：
< img src =https://i.stack.imgur.com/GVrJ9.pngalt =Bad-IE8>

Sencha slice:

ExtJS核心覆盖：

有没有其他的方法或设置，javascript或sass来更容易地处理所有这些兼容性问题？

Are there any other ways or settings, javascript or sass, to handle all of these compatibility issues more easily?

推荐答案

没有一个答案，我将提供我采取的实现。

So with no avail for an answer I will supply the implementation I took.

如上所述，这个复杂的ExtJS 4.1应用程序有一个复杂的设计。 sencha切片工具无法工作（但是，如果您想保留所有的sencha默认值，并且只是更改应用程序的基本颜色，可能是基于SASS变量），那么它将会工作。

As you can see above, this complex ExtJS 4.1 application has a complex design. The sencha slice tool did not work whatsoever (It does work however if you want to keep the all sencha defaults and just change the application's base color, possibly base SASS variables?).

另一方面，您可以看到Ext覆盖出现了多么美观。一个相当稳固的过渡，看起来是95％一样（或者Chris Coyier会说，呃，够好）。

On the other hand, you can see how beautiful the Ext overrides turned out. A pretty solid transition and looks 95% the same (or as Chris Coyier would say, "meh, good enough").

下面是我的实现：

Ext.application({
    ...
    init: function () {
        // Override CSS3BorderRadius value which caused render problems in <IE9 when false.
        Ext.supports['CSS3BorderRadius'] = true;

        // Hack-ish remove class sniffers from Ext.EventManager (which attaches modrnizer type classes onto the body)
        Ext.getBody().removeCls('x-nbr x-nlg');
    }
    ...
});

这个实现是优雅的：

1. 我将编写可以工作的跨浏览器CSS。我不需要sencha来覆盖我的CSS，它的更聪明，更可怕的CSS。


2. 我明白，传统浏览器无法处理圆角 - 我不想要它们。 >
   
3. 我明白IE不能处理线性渐变 - 默认情况下我不想要图像。我想使用过滤器：progid。


4. 我不希望SENCHA与自定义图像的颜色，带有密码的容器和数据表GALORE的颜色相提并论。

gg希望这有助于某人

gg hope this helps someone

这篇关于ExtJS4太优雅...需要帮助ie8组件渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！