Ext JS：如何为 Grid 列标题编写自定义样式 CSS/SCSS？

Question

我想覆盖 Grid 列标题的现有样式。

 {
  text: '<table style="padding:"0px""><tr 
           bgcolor="#C0C0C0"><th>abc</th></tr><tr><td style="border-top: 1px 
            solid black; padding-top: 10px;" align="center">Test</td></tr> 
              </table>',
  renderer: me.checkboxRenderer,
  align: 'center',
  flex: 1,
  padding: 0
}

问题：每当我尝试向此列添加填充样式时，它都会为具有 x-column-header x-column-header-default 类的更高级别的 Div 应用填充。表格填充（列标题文本）设置为零。当一切都设置为零时，在渲染此网格后，在更高级别的 div 和表格之间有另一个具有 x-column-header-inner 类的 div，此 div 正在添加一些我无法将其设为零的动态填充。

想法：我想通过在 CSS/SCSS 文件中用 Div id gridcolumn-2573-titleEl 或 class x-column-header-inner 覆盖样式来添加填充零。

我们如何创建一个新的 CSS/SCSS 文件并将其链接/导入到 Ext JS 文件，以便我可以将中间的 Div 样式填充覆盖为零。

Answer 1

如果你使用 Sencha Cmd（你应该），文件夹结构通常如下：

• 应用程序
• 萨斯
  • src

对于app目录下名为Application.js的JS文件，将名为Application.scss的SCSS文件放到sass/src目录下。对于app/view目录下名为Main.js的JS文件，将名为Main.scss的SCSS文件放到sass/src/view目录下。该文件的内容将在下一次构建时添加到 CSS 中（但前提是 js 文件本身也添加到构建中）。

不要在您的 CSS 中使用自动生成的 ID，例如“gridcolumn-2573-titleEl”。 “2573”是一个自动递增的数字，您的 CSS 将不可避免地损坏，可能在下一次重新加载时已经损坏。推荐的方法是在您的列上添加一个独特的userCls：

  renderer: me.checkboxRenderer,
  userCls: 'checkboxRendererCls'

然后将特制的 CSS 规则添加到与您添加 userCls 的 JS 文件匹配的 SCSS 文件中：

.checkboxRendererCls .x-column-header-inner {
    padding: 0;
}