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:

这是谷歌浏览器:

...

1. 除了必须检查所有标记并撤销这些糟糕的设计决策外
2. 除了必须重新创建所有图像以匹配现有设计
3. 对于不支持 x-nlg、x-nbr 等的浏览器，除了必须修改核心文件以强制正常降级之外，不会发生

更新 2012-11-23

煎茶切片:

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 无法处理线性渐变 — 默认情况下我不想要图像.我想使用 filter:progid.
4. 我不希望 SNCHA 用数十个自定义图像、数十个嵌套容器和大量表格来膨胀我的标记

gg 希望这对某人有帮助

gg hope this helps someone

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