如何在Extjs 4.0中鼠标悬停时突出显示网格

How to highlight a grid on mouseover in Extjs 4.0?

本文关键字：悬停 网格 显示 鼠标 Extjs      更新时间：2023-09-26

当我将鼠标移动到网格上时，我想突出显示整个网格，使用一些颜色，或者可能通过改变边框或其他方式，这应该看起来好像我在Ext Js 4.0中选择表格?

正如下面MarthyM提到的，使用'overCls'代替侦听器更容易。在你的网格声明中:

overCls: 'borderred'

在你的样式表中:

.borderred { border: 1px solid red; }

我已经更新了这里的提琴使用'overCls' ExtJS 4.0.7: https://fiddle.sencha.com/#fiddle/na4

原始回答:

 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');
         }
     }
 }

您唯一需要做的就是使用overCls配置设置CSS类。

overCls: 'gridHover'

这将添加一个CSS类到您的网格，当鼠标悬停在它。然后你只需要在你的CSS中设置样式:

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

就是这样。不需要jQuery或监听器。

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

相关文章：