如何动态更改extjs 4.2项目中的主题？

Question

我在Extjs 4.2中创建了一个新项目。我想在UI中提供一个选项来动态更改主题。我创建了一个名为“Classic”和“Gray”的组合框。每当我选择一个特定的主题。该应用程序应该转换为该主题。

请帮忙。

感谢很多

Answer 1

简单地得到您的组合框的处理程序来加载你选择什么主题的CSS。加载的CSS中的新选择器将覆盖以前的选择器并更新主题。

还有一个功能Ext.util.CSS.swapStyleSheet这将为您执行此操作。

Answer 2

虽然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文件。它不会每次向服务器请求新主题。

它对我很好。