2

这是我与主题更改相关的代码部分。

在我的 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。尝试了默认、灰色、访问、海王星主题。

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

在此处输入图像描述

重新加载浏览器（看起来不错，通知面板和窗口定位正确）

在此处输入图像描述

我做错什么了吗？

我没有运气修复它。请帮忙~

4

2 回答 2

1

编辑：

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
    }

中提琴 - 它只是工作。

于 2013-11-24T00:15:52.597 回答
1

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

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

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

于 2013-06-01T12:24:51.690 回答