How to remove column header highlighting when filtered in the grid panel in Ext Js?

Question

I have used the column header of the grid panel in Ext Js, and applied filters in the columns through its drop-down filter menu.

Every time I apply a filter to the column through the menu, the column title is highlighted (with underlined letters and bold).

I have been trying to find a way to remove the highlight (as in Project Name in the photo) by code, so that every time a filter is applied to a column, the highlight of all other columns is removed. Thus, only one column at a time is highlighted.

I already searched the documentation and couldn’t find any event or method that I can use to remove this highlight that the grid applies to column header. I want it to be impossible to have 2 columns highlighted in the title at the same time.

Is there any way to implement this? Still, is there any config I can use to remove the application from that highlight (so that the columns are never highlighted)?

Note: I am applying a store.clearFilter() every time the column filter is modified, and the header is not back to normal yet.

Answer 1

Try to put a id on the Columns and after that. Use CSS to remove it.

 #columns-from-menu
  {
    font-style: normal;
    font-weight: 200;
    font-size: 16px;
    text-decoration: none;
  }

And if it dont help you, Try to put "! Important" after Styles.

 #columns-from-menu
  {
    font-style: normal!important;
    font-weight: 200!important;
    font-size: 16px!important;
    text-decoration: none!important;
  }