EXTJS Grid分组展开行异常：缺少CSS样式？

我之前也碰到过一模一样的情况，用admin-dashboard模板搭的应用里，分组表格的+/-折叠图标死活不出来，后来排查了几个关键点终于解决了，给你参考：

• 检查主题样式是否完整加载
  admin-dashboard模板一般会做定制化主题，很可能默认没引入分组表格的基础样式。你可以打开项目里的app.json，确认requires字段里有没有包含theme-classic或者对应的主题包；如果是自定义主题，要确保它继承了经典版的基础样式，没遗漏分组表格相关的CSS规则。

• 排查自定义CSS的覆盖问题
  模板的自定义样式大概率覆盖了默认的x-grid-group-title::before伪元素样式。用浏览器开发者工具对比官网示例和你应用里的这个元素：

  • 看content属性是不是被设为空或者错误字符；
  • 检查display、visibility、font-family这些属性，是不是被改成了让图标无法显示的状态。
    官网里这个伪元素会用Sencha自带的图标字体，content对应展开/折叠的特定字符，要是你的应用里这些规则被覆盖，图标自然出不来。

• 确认Grouping Feature的配置细节
  虽然官网示例是默认配置，但模板可能修改了ExtJS的默认配置。你可以在Grouping feature里明确指定相关属性，比如：

  features: [{
      ftype: 'grouping',
      collapseToolText: '收起分组',
      expandToolText: '展开分组',
      groupHeaderTpl: '{name}（共{rows.length}条数据）'
  }]
  

  同时检查有没有自定义的Feature类，不小心覆盖了默认的折叠/展开图标逻辑。

• 检查图标字体的加载状态
  ExtJS的折叠图标是靠字体文件实现的，如果模板没正确加载Sencha的图标字体（比如sencha-icons.ttf），伪元素的content字符就无法渲染成图标。你可以在浏览器的网络面板里查看字体文件是否成功加载，要是路径不对或者打包时没包含这些字体，就得调整主题的资源配置。

• 手动补全样式（终极方案）
  如果上面的方法都没解决，你可以自己在应用的CSS文件里添加样式恢复图标：

  .x-grid-group-title::before {
      font-family: 'ExtJSClassicIcons' !important; /* 换成你应用实际用的图标字体名 */
      content: '\e902'; /* 折叠状态的图标字符，根据字体调整 */
      margin-right: 6px;
      cursor: pointer;
      font-size: 12px;
  }
  .x-grid-group-collapsed .x-grid-group-title::before {
      content: '\e903'; /* 展开状态的图标字符 */
  }
  

  注意要替换成你应用里实际加载的图标字体名称和对应的字符编码，用Font Awesome这类通用图标字体也可以替代。

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