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添加了一些动态填充，我无法将其设置为零。 / p>

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

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

Answer 1

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

app＆lt; - js files
SASS
- src＆lt; - scss files

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

不在CSS中使用自动生成的ID，例如“gridcolumn-2573-titleEl”。 “2573”是一个自动递增的数字，你的CSS将不可避免地破坏，可能已经在下次重新加载。建议的方法是在列中添加唯一的userCls：

  renderer: me.checkboxRenderer,
  userCls: 'checkboxRendererCls'

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

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

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

1 个答案: