html - 分机号 : How to write custom styles CSS/SCSS for Grid column header?

Question

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

 {
  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 文件。

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

Answer 1

如果你正在使用 Sencha Cmd(你应该)，文件夹结构通常如下:

• 应用 <- js 文件
• 萨斯
  • src <- scss 文件

对于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;
}