如何切换 extjs 主题?

发布于 2025-01-02 04:04:48 字数 85 浏览 0 评论 0原文

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

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

谢谢

I noticed that extjs comes with 3 to 4 default themes/skins . How can I select or swtich between the themes?

I want to change the blue to select the grey themes or something else.

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

天涯沦落人 2025-01-09 04:04:49

Ext.util.CSS.swapStyleSheet (v4.0, v6.7) 函数可以用于在不同主题之间切换, 论坛帖子展示了一个示例。

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

Ext.util.CSS.swapStyleSheet (v4.0, v6.7) function can be used to switch between the different themes, this forums post shows an example.

Also I implemented this at first in my app a while back, but I ultimately found that forcing a browser refresh was necessary instead of dynamically swapping the CSS as there would still be some weird sizing/positioning issues. This was mainly when switching between the accessibility theme.

樱花坊 2025-01-09 04:04:49

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

1。使用新的 CSS 主题渲染页面需要更多时间。
2. 在主题之间切换时,您的页面会暂时失去任何CSS。这会让页面看起来很糟糕(破碎且平淡)。
3. 屏幕上会出现不必要的滚动条。

我使用 JavaScript 克服了这些问题:

这里,

  1. 在 HTML 文件中包含所有 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 文件。它不会每次都向服务器询问新主题。

它对我来说非常有效。

Though Ext.util.CSS.swapStyleSheet will work, It has few drawbacks:

1. It takes more time to render the page with new CSS theme.
2. While switching between themes, your page will be out of any css for a while. That will make the page look bad (broken and plain).
3. Unnecessary scrollbars will appear on the screen.

I overcame these using JavaScript:

Here,

  1. Include all the CSS files in your HTML file.

    <link rel="stylesheet" id="theme1" type="text/css" href="../Theme1.css" />
    <link rel="stylesheet" id="theme2" type="text/css" href="../Theme2.css" />
    
  2. Disable all the themes except one you want as default.

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

    Now the page will be loaded with 'theme2'.

  3. If you want to switch the theme. Do the opposite of the above...

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

In this way, the switching will be real fast. Since we have loaded all the css files initially. It will not ask the server for new theme every time.

It worked very well for me.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文