ExtJS锁定网格设置分隔线边框宽度变量为0后仍出现边框及列调整时异常问题求助

我之前也踩过ExtJS锁定网格这个边框的坑，结合实际调试经验给你几个可行的解决方向：

• 强制用CSS覆盖分隔线样式
  有时候主题变量的动态值（比如dynamic(0)）会被组件内联样式或更高优先级的默认CSS覆盖，直接给锁定网格的分隔器加全局样式是最快的验证方式：

  /* 隐藏锁定网格的分隔边框 */
  .x-grid-lockable-separator {
      border-width: 0 !important;
      width: 0 !important;
  }
  /* 处理可能残留的列右侧边框 */
  .x-grid-lockable .x-grid-item {
      border-right: none !important;
  }
  

  后续可以去掉!important，通过添加你的网格自定义类名来提升选择器优先级，避免影响全局样式。

• 检查网格及列的边框配置
  确认你的锁定网格配置里有没有开启splitBorder: true这类会生成额外边框的属性；同时可以在锁定列的配置中直接关闭右侧边框：

  {
      text: '你的锁定列标题',
      locked: true,
      dataIndex: 'xxx',
      // 强制关闭列右侧边框
      style: {
          borderRight: 'none'
      }
  }
  

• 监听列调整事件修正重绘间隙
  调整列宽时出现的空白间隙，大多是ExtJS重绘时的计算误差导致的。可以监听columnresize事件，强制触发视图刷新来修正：

  // 假设你的网格实例是grid
  grid.on('columnresize', function() {
      // 刷新主视图和锁定视图
      grid.getView().refresh();
      grid.lockedGrid.getView().refresh();
      // 也可以尝试强制布局
      grid.doLayout();
  });
  

  另外，给网格加上lockable: { syncRowHeight: true }配置，确保锁定区和非锁定区的行高度完全同步，也能减少间隙出现的概率。

• 验证主题变量编译是否生效
  试试把$grid-lockable-separator-border-width: dynamic(0)改成直接赋值$grid-lockable-separator-border-width: 0;，看看编译后的CSS中这个变量是否正确应用到了锁定网格组件上。如果是响应式场景需要dynamic()，要检查响应式断点的配置是否和这个变量有冲突。

内容的提问来源于stack exchange，提问作者vciurtea.biz1