ExtJs 4.2交换样式表对我来说无法正常工作

Question

以下是我的代码中与主题更改相关的部分。

在我的javascript文件中：

loadTheme: function (theme) {
    document.getElementById('extjs-theme-css').href = "css/ext-all" + (theme == '' ? '' : '-') + theme + ".css";
    //OR (tried both ways, same issue)
    Ext.util.CSS.swapStyleSheet('extjs-theme-css', "css/ext-all" + (theme=='' ? '' : '-') + theme + ".css");
},

并在html文件中：

<link rel="stylesheet" type="text/css" href="js/extjs/v4.2/resources/css/ext-all-notheme.css" id="extjs-theme-css" />

当我第一次加载网页时，所有的窗口和面板样式和位置都搞砸了。 浏览器刷新或鼠标拖动组件调整大小后，样式和位置再次变为正确。 （看我的意思是图片）。每当我更改主题时都会发生这种情况。

IE，FF或Chrome也是如此。尝试默认，灰色，访问，海王星主题。

第一次（搞砸了，通知面板从窗口移到右侧）

重新加载浏览器（看起来很好，通知面板和窗口位置正确）

我做错了吗？

我没有运气修理它。请帮助〜

Answer 1

对于已渲染的组件，您无法动态更改Ext主题。原因是在渲染过程中，Ext将读取生成的DOM元素的样式属性，如边框大小，边距等，并使用该信息来确定每个元素的大小。在大多数情况下，此大小在元素的style属性中设置，因此不会受CSS规则更改的影响。

因此，如果两个不同主题的渲染元素大小不同，则已渲染的组件将以您观察到的方式中断。

您可以通过在两个主题之间进行交换来测试此解释，这两个主题仅根据颜色不同，例如“经典”和“灰色”主题。在这种情况下，组件大小不会受到影响。

Answer 2

修改

Rixo完全正确 - 你无法动态更改已经渲染的组件的Ext主题。

解决方法是在应用启动时加载主题。要执行此操作，您需要将所选主题名称存储在可以在页面刷新后存活的位置。 ExtJS示例页面使用查询参数，但我选择了一个cookie。在我的index.jsp内，我放置了以下内容：

<script type="text/javascript">
    var consoleLogEnabled = true;
    var contextPath = "${pageContext.request.contextPath}";
    var theme = 'default';

    if (document.cookie) {
        index = document.cookie.indexOf('theme');
        if (index !== -1) {
            f = (document.cookie.indexOf("=", index) + 1);
            t = document.cookie.indexOf(";", index);
            if (t === -1) {
                t = document.cookie.length;
            }
            theme = (document.cookie.substring(f, t));
        }
    }

    if ((theme === 'default') || (theme !== 'gray' && theme !== 'access' && theme !== 'neptune'))
        document.write('<link rel="stylesheet" type="text/css" href="js/ext-js/resources/css/ext-all-debug.css" />');
    else
        document.write('<link rel="stylesheet" type="text/css" href="js/ext-js/resources/css/ext-all-' + theme + '-debug.css" />');

    document.write('<script type="text/javascript" src="js/ext-js/ext-all-debug-w-comments.js"></scr'+'ipt>');

    if (theme === 'neptune')
        document.write('<script type="text/javascript" src="js/ext-js/ext-theme-neptune.js"></scr'+'ipt>');
</script>

<link rel="stylesheet" type="text/css" href="resources/css/myapp-style.css" />
<script type="text/javascript" src="js/myapp/myapp.js"></script>

现在，当我想更改主题时，我只需在控制器中执行以下操作：

changeTheme : function(theme) {
    if (theme !== Ext.util.Cookies.get('theme')) {
        Ext.util.Cookies.set('theme', theme);
        location = location; // Refresh of page cannot be avoided as its an Ext-JS limitation
    }

Viola - 它只是工作。