Remove standard highlighting in grid column header in extJS 4.2.2

Question

I want to remove the blue highlighting that occurs when you mouse over the column header in a grid.Panel column header in ExtJS 4.2.2.

I have successfully changed every other aspect of the CSS using tdCls, baseCls, and manually adding my own classes. I have tried targeting the problem by making CSS classes with the ".x-header-over" or ".x-column-header-inner-over" names. However, these do nothing.

Essentially, I do not want the headers to be clickable or have any affordances that they are. I have turned mouseover off (ie made false) to remove this affordance on the grid itself, but it does not apply to the header.

Answer 1

One option would be to set sortable:false and menuDisabled:true like so in the column configuration itself:

{text: "Name", width:120, dataIndex: 'Name', sortable:false, menuDisabled:true}

This will disable the actions themselves. As far as the CSS highlight goes, if you want to do this for all grids in your application, you can set:

.x-column-header-over {
 background:none   
}

This will disable the hover background that Ext tacks on when you hover over the element.

Hope this helps!