如何切换extjs主题？

Question

我注意到extjs带有3到4个默认主题/皮肤。如何在主题之间选择或切换？

我想更改蓝色以选择灰色主题或其他内容。

由于

Answer 1

Ext.util.CSS.swapStyleSheet函数可用于在不同主题之间切换，this论坛帖子显示示例。

我最初在我的应用程序中实现了这一点，但我最终发现强制浏览器刷新是必要的，而不是动态交换CSS，因为仍然会有一些奇怪的大小/定位问题。这主要是在可访问性主题之间切换时。

Answer 2

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

<强> 1。使用新的CSS主题渲染页面需要更多时间 2.在主题之间切换时，您的页面暂时不会出现任何问题。这将使页面看起来很糟糕（破碎和简单） 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;
   

   现在该页面将加载＆＃39; theme2＆＃39;。

3. 如果要切换主题。做与上述相反的事情......

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

通过这种方式，切换将非常快速。因为我们最初加载了所有的css文件。它不会每次都要求服务器提供新的主题。

对我来说非常好。