如何在ExtJS 7中重载页面切换经典应用主题？

一、基于Ext.Package的主题切换方案 #

这是官方推荐的模块化主题切换方式，适配Sencha Cmd的包管理机制：

• 1. 确认主题包配置
     先检查两个主题包（dark/light）的package.json，确保类型为主题并继承theme-triton：

  {
    "name": "theme-dark",
    "type": "theme",
    "extends": "theme-triton",
    "requires": ["theme-triton"]
  }
  

  同时在主应用的app.json的requires数组中添加这两个主题包，确保构建时会包含它们的资源：

  "requires": [
    "theme-light",
    "theme-dark"
  ]
  

• 2. 编写主题切换函数
     利用Ext.Package的加载/卸载API，动态切换主题并处理CSS替换：

  function switchTheme(themeName) {
      // 卸载当前激活的非默认主题
      const oppositeTheme = themeName === 'light' ? 'dark' : 'light';
      const currentPkg = Ext.Package.get(`theme-${oppositeTheme}`);
      if (currentPkg?.isLoaded()) {
          currentPkg.unload();
      }
  
      // 加载目标主题包
      Ext.Package.load({
          name: `theme-${themeName}`,
          onSuccess: (pkg) => {
              // 移除旧主题的CSS链接
              document.querySelectorAll('link[rel="stylesheet"][href*="theme-"]').forEach(link => {
                  if (!link.href.includes(themeName)) link.remove();
              });
              // 保存用户选择到本地存储
              localStorage.setItem('selectedTheme', themeName);
              // 刷新页面确保所有组件样式生效
              window.location.reload();
          },
          onError: (err) => {
              console.error('主题加载失败:', err);
          }
      });
  }
  

• 3. 初始化时恢复用户选择
     在应用启动前读取本地存储，自动切换到用户上次选择的主题：

  Ext.onReady(() => {
      const savedTheme = localStorage.getItem('selectedTheme') || 'light';
      if (savedTheme !== 'light') {
          switchTheme(savedTheme);
      }
  });
  

二、直接替换CSS文件的方案（轻量化） #

如果不想依赖Ext.Package的包加载机制，直接操作页面的CSS链接也是高效的方式，最佳处理时机是应用启动前：

• 1. 预编译主题CSS
     用Sencha Cmd分别构建两个主题的完整CSS文件，确保输出路径清晰，比如：
  • Light主题：build/production/YourApp/resources/theme-light-all.css
  • Dark主题：build/production/YourApp/resources/theme-dark-all.css
• 2. 编写CSS替换函数
     直接修改页面中的主题CSS链接，完成切换：

  function switchTheme(themeName) {
      const targetHref = `resources/theme-${themeName}-all.css`;
      let themeLink = document.querySelector('link[rel="stylesheet"][href*="theme-"]');
      
      if (themeLink) {
          themeLink.href = targetHref;
      } else {
          themeLink = document.createElement('link');
          themeLink.rel = 'stylesheet';
          themeLink.href = targetHref;
          document.head.appendChild(themeLink);
      }
  
      localStorage.setItem('selectedTheme', themeName);
      window.location.reload();
  }
  

• 3. 初始化恢复选择
     同样在Ext.onReady阶段读取本地存储，自动应用保存的主题：

  Ext.onReady(() => {
      const savedTheme = localStorage.getItem('selectedTheme') || 'light';
      if (savedTheme !== 'light') {
          switchTheme(savedTheme);
      }
  });
  

三、关键注意事项 #

• 无论哪种方案，页面刷新都是确保所有组件样式完全生效的稳妥方式——ExtJS组件的渲染依赖初始主题样式，动态切换后已渲染的组件无法自动更新所有样式。
• 使用Sencha Cmd构建时，务必执行sencha app build，确保主题包的资源被正确编译到输出目录。
• 若采用Ext.Package方案，要保证主题包的依赖（theme-triton）已被主应用正确加载。

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