EXT JS:如何为网格列标题编写自定义样式CSS/SCSS

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和表格之间有另一个具有x-column-header-inner类的DIV，此DIV正在添加一些动态填充，我无法将其变为零。

IDEA：我想通过使用Div ID gridcolumn-2573-titleEl或CCSS/SCSS文件中的DIV ID CC_3覆盖样式来添加零填充。

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

Answer 1

如果您使用的是sencha cmd(应该(，则文件夹结构通常如下：

• app＆lt; -js文件
• sass
  • src＆lt; - scss文件

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

do 不是在您的CSS中使用自动化ID，例如" GridColumn-2573-Titleel"。" 2573"是一个自动收入的数字，您的CSS不可避免地会破裂，也许已经在下一个重新加载了。建议的方法是在您的列上添加唯一的userCls：

  renderer: me.checkboxRenderer,
  userCls: 'checkboxRendererCls'

，然后将特殊精心设计的CSS规则添加到与JS文件匹配的SCS文件中，您添加了userCls：

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