CODEWITHSUNDEEP
javascriptcssextjs
Mehaboob Khan
Mehaboob Khan

Reputation: 363

How to highlight a grid on mouseover in Extjs 4.0?

I want to highlight the whole grid when I move mouse over that grid using some color or maybe by changing border or some other way which should look as if I am selecting the table in Ext Js 4.0?

Some other alternative will work as well.

Upvotes: 2

Views: 2103

Answers (2)

MarthyM
MarthyM

Reputation: 1849

The only thing you need to do is set a CSS class using the overCls configuration.

overCls: 'gridHover'

That will add a CSS class to your grid, when a mouse hovers over it. Then you just need to set the style in your CSS:

.gridHover {
    border: 2px solid red; /* or any other style */
}

And that's it. No need for jQuery or listeners.

Documentation: http://docs.sencha.com/extjs/4.0.0/#!/api/Ext.grid.Panel-cfg-overCls

Upvotes: 1

Zero Cool
Zero Cool

Reputation: 1936

As MarthyM mentions below easier to use 'overCls' instead of listeners. On your grid declaration:

overCls: 'borderred'

In your style sheet:

.borderred { border: 1px solid red; }

I've updated the fiddle here using 'overCls' for ExtJS 4.0.7: https://fiddle.sencha.com/#fiddle/na4

Original answer:

 listeners: {
     containermouseover: {
         fn: function (view) {
             view.up('gridpanel').getEl().applyStyles('border: solid 1px red');
         }
     },
     containermouseout: {
         fn: function (view) {
             view.up('gridpanel').getEl().applyStyles('border: solid 1px #99bce8');
         }
     }
 }

Upvotes: 3

Related Questions