Ext JS: How to write custom styles CSS/SCSS for Grid column header?

Question

I want to override an existing style for Grid column header.

 {
  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
}

Issue: Whenever I try to add padding style to this column, it is applying the padding for the higher-level Div with class x-column-header x-column-header-default. The table padding (column header text) is set to zero. When everything is set to zero, after this grid was rendered there was another div with class x-column-header-inner in between higher level div and the table, this div is adding some dynamic padding which I was unable to make it to zero.

Idea: I want to add padding zero by overwriting the style with Div id gridcolumn-2573-titleEl or class x-column-header-inner in a CSS/SCSS file.

How do we create a new CSS/SCSS file and link/import it to Ext JS file so that I can overwrite the middle Div style padding to zero.

Answer 1

If you are using Sencha Cmd (you should), the folder structure is usually as follows:

• app <- js files
• sass
  • src <- scss files

For a JS file named Application.js in the app directory, put an SCSS file named Application.scss into the sass/src directory. For a JS file named Main.js in the app/view directory, put an SCSS file named Main.scss into the sass/src/view directory. The content of that file will be added to the CSS on the next build (but only if the js file itself is also added to the build).

Do not use autogenerated ids like "gridcolumn-2573-titleEl" in your CSS. The "2573" is an auto-incrementing number and your CSS will inevitably break, maybe already on the next reload. The recommended approach is to add on your column a unique userCls:

  renderer: me.checkboxRenderer,
  userCls: 'checkboxRendererCls'

and then add a specially crafted CSS rule into the SCSS file that matches the JS file where you added the userCls:

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