在 ExtJs 中支持单个构建下的多个主题

Question

我必须根据一些事件更改主题。我从 sencha 文档和厨房水槽中了解到，我们必须在 app.json

的 "builds" 块下输入所有主题

"builds": {
     "classic": {
        "toolkit": "classic",
        "theme": "theme-classic"
    },
    "triton": {
        "toolkit": "classic",
        "theme": "theme-triton"
    }
},

Post 构建，我们可以重新加载应用程序，如下所示以获得特定主题。

location.search = "/?profile=classic";
location.search = "/?profile=triton";

但它没有按预期工作。请任何提示。

Answer 1

您只完成了一半。 Sencha Cmd 将为您的主题生成不同的清单。现在您必须在应用程序加载时选择相应的清单。查看 Microloader 文档中的 Dynamic Manifest 部分。

There are times when you may want to select a build profile client-side. To simplify this, the Microloader defines a hook method called “Ext.beforeLoad”. If you define this method like the following, you can control the name or content of “Ext.manifest” prior to the Microloader processing it while leveraging its platform detection.

对于你的情况，它看起来像这样：

<script type="text/javascript">
    var Ext = Ext || {};
    Ext.beforeLoad = function (tags) {
        var theme = location.href.match(/profile=([\w-]+)/);
        theme  = (theme && theme[1]) || 'classic';
        Ext.manifest = theme;
    };
</script>

在 ExtJs 中支持单个构建下的多个主题

Support multiple themes under single build in ExtJs

extjs

extjs6