如何动态更改extjs4.2项目中的主题？

Question

我在Extjs4.2中创建了新项目。我想在UI中提供一个选项来动态更改主题。我创造了一个组合框，主题名称如“经典”和“灰色”。每当我选择一个特定的主题。应用程序应该转换成这个主题。

请帮帮忙。

非常感谢

Answer 1

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

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

Answer 2

尽管Ext.util.CSS.swapStyleSheet可以工作，但它几乎没有什么缺点：

1.用新的CSS主题.呈现页面需要更多的时间

2.在主题之间切换时，您的页面将在一段时间内退出任何css。这将使页面看起来很糟糕(破损和普通).

3.不必要的滚动条将出现在屏幕上.

我用Javascript的方法克服了这些问题。

这里,

1. 在HTML文件中包含所有CSS文件。
2. 禁用所有主题，但作为默认设置的主题除外。 document.getElementById('theme1').disabled =真；document.getElementById('theme2').disabled = false； 现在，页面将被加载‘theme2 2’。
3. 如果你想换主题的话。反之亦然。 document.getElementById('theme1').disabled = false；document.getElementById('theme2').disabled = true；

这样，转换就会非常快。因为我们最初加载了所有的css文件。它不会每次都要求服务器提供新的主题。

对我来说效果很好。