PDA

View Full Version : How to disable mouse over effect on column header?



sk@ia
14 Feb 2013, 10:15 AM
I was trying to disable mouse over effect on column head, the first thought was using 'overCls'. But it does not work. When look into the generated dom and css class, I found my customized 'overCls' is applied to header colum div correctly. However, there is a 'x-column-header-over' class applied to a child div with 'x-column-inner' class. the id of the inner dom is 'column type-generated id-titleEl'.

I know I can editing extjs's css or override the 'x-column-header-over' class directly, but I prefer to append a customized css class and leave default extjs css untouched. So that I can programmatically disable mouse over effect.

So dig into the source code view of extjs4-1, here is what I discovered:


http://docs.sencha.com/ext-js/4-1/source/Column3.html#Ext-grid-column-Column


// Not the standard, automatically applied overCls because we must filter out overs of child headers. hoverCls: Ext.baseCSSPrefix + 'column-header-over',
I don't understand the comment, why sencha need this hoverCls over 'overCls'?


onTitleMouseOut (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-method-onTitleMouseOut)( )PRIVATE
Available since: Ext 4
[/URL]No comments. Click to add. (http://docs.sencha.com/ext-js/4-1/#)




(http://docs.sencha.com/ext-js/4-1/#)
Ext.grid.column.Column
view source (http://docs.sencha.com/ext-js/4-1/source/Column3.html#Ext-grid-column-Column-method-onTitleMouseOver)
onTitleMouseOver (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-method-onTitleMouseOver)( )PRIVATE
Available since: Ext 4
[URL="http://docs.sencha.com/ext-js/4-1/#"]No comments. Click to add. (http://docs.sencha.com/ext-js/4-1/#)





and these two methods apply the hoverCls not overCls to column title el.



any idea, suggestion? What is the best approach to solve the problem?
Override column class? but the property and methods are private, which I assume sencha will change in future without providing any backward compatibility.
Change extjs css class? that will be hardcoded change for all columns.

mitchellsimoens
17 Feb 2013, 8:24 AM
You can remove the listener:


column.un({
scope : column,
element : 'titleEl',
mouseenter : column.onTitleMouseOver,
mouseleave : column.onTitleMouseOut
});

sk@ia
20 Feb 2013, 9:09 AM
This is not the answer I am looking for. Maybe the original title cause confusing here. I want to apply customized css class not disable it


You can remove the listener:


column.un({
scope : column,
element : 'titleEl',
mouseenter : column.onTitleMouseOver,
mouseleave : column.onTitleMouseOut
});