如何在ExtJS7 Classic主题中基于JS逻辑或查询字符串设置条件？

核心思路 #

把全局Sass变量按功能/环境拆分到独立文件，通过预构建多套主题样式或动态加载对应CSS的方式，用JS根据URL参数或应用内功能开关切换变量组。

具体实现步骤 #

1. 拆分Sass变量分组 #

在./theme/sass/var/目录下按功能/环境创建变量文件：

• FeatureA.scss：功能A专属变量集合
• FeatureB.scss：功能B专属变量集合
• Default.scss：默认 fallback 变量组

主文件Component.scss先引入默认变量，后续切换时新变量会自动覆盖默认值：

// ./theme/sass/var/Component.scss
@import 'Default';
// 动态引入的变量文件会在此之后加载，覆盖默认值

2. 用Sencha Cmd预构建多套主题 #

执行构建命令生成对应变量组的CSS文件：

• 构建功能A主题：

sencha app build --theme my-theme-feature-a

• 构建功能B主题同理，构建时指定对应变量文件覆盖默认配置。

3. JS逻辑切换主题 #

方式一：根据URL查询字符串自动切换

在应用入口app.js中解析URL参数，加载对应主题：

Ext.onReady(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const targetTheme = urlParams.get('themeGroup') || 'default';
    
    // 动态创建link标签加载主题CSS
    const themeLink = document.createElement('link');
    themeLink.rel = 'stylesheet';
    themeLink.href = `resources/css/my-theme-${targetTheme}.css`;
    document.head.appendChild(themeLink);
    
    // 初始化应用
    Ext.application({
        name: 'MyApp',
        // ...其他应用配置
    });
});

访问时通过?themeGroup=feature-a参数指定主题。

方式二：应用内功能开关手动切换

添加主题切换按钮，点击时替换当前主题CSS：

function switchTheme(themeKey) {
    const existingThemeLink = document.querySelector('link[rel="stylesheet"][href*="my-theme-"]');
    if (existingThemeLink) {
        existingThemeLink.href = `resources/css/my-theme-${themeKey}.css`;
    }
}

// 绑定按钮事件
Ext.create('Ext.button.Button', {
    text: '切换到功能A主题',
    handler: () => switchTheme('feature-a')
});

4. 开发环境动态编译（可选） #

开发阶段用node-sass配合Express实现动态编译，根据请求参数加载对应变量组：

const sass = require('node-sass');
const express = require('express');
const app = express();

app.get('/dynamic-theme.css', (req, res) => {
    const themeGroup = req.query.group || 'default';
    const sassCode = `
        @import './theme/sass/var/Default.scss';
        @import './theme/sass/var/${themeGroup.charAt(0).toUpperCase() + themeGroup.slice(1)}.scss';
        @import './theme/sass/src/Component.scss';
    `;
    
    sass.render({
        data: sassCode,
        outputStyle: 'expanded'
    }, (err, result) => {
        err ? res.status(500).send(err.message) : res.type('css').send(result.css);
    });
});

app.listen(3000);

应用中引用动态生成的CSS：

<link rel="stylesheet" href="http://localhost:3000/dynamic-theme.css?group=feature-b">

内容的提问来源于stack exchange，提问作者Sergey Bogdanov