2

我在 Extjs 4.2 中创建了新项目。我想在 UI 中提供一个选项来动态更改主题。我创建了一个组合框，其中包含“经典”和“灰色”等主题名称。每当我选择一个特定的主题。该应用程序应转换为该主题。

请帮忙。

非常感谢

4

2 回答 2

1

虽然 Ext.util.CSS.swapStyleSheet 可以工作，但它有一些缺点：

1. 使用新的 CSS 主题渲染页面需要更多时间。
2.在主题之间切换时，您的页面将有一段时间没有任何css。这将使页面看起来很糟糕（破碎且平淡）。
3. 屏幕上会出现不必要的滚动条。

我通过使用Javascript方式克服了这些..

这里，

  1. 在您的 HTML 文件中包含所有 CSS 文件。

    <link rel="stylesheet" id="theme1" type="text/css" href="../Theme1.css" />
<link rel="stylesheet" id="theme2" type="text/css" href="../Theme2.css" />

  2. 禁用除您想要的默认主题之外的所有主题。

    document.getElementById('theme1').disabled = true;
document.getElementById('theme2').disabled = false;

    现在页面将加载“theme2”。

  3. 如果你想切换主题。反之亦然..

    document.getElementById('theme1').disabled = false;
document.getElementById('theme2').disabled = true;

这样，切换将非常快。因为我们最初已经加载了所有的 css 文件。它不会每次都向服务器询问新主题。

它对我很有效。

于 2014-08-11T10:47:23.900 回答
1

只需在组合框中获取处理程序即可为您选择的任何主题加载 css。加载的 css 中的新选择器将覆盖以前的选择器并更新主题。

还有一个函数Ext.util.CSS.swapStyleSheet将为您执行此操作。

于 2013-05-16T10:51:04.130 回答