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

Question

我想在使用某种颜色或可能通过更改边框或其他方式将鼠标移到该网格上时突出显示整个网格，这看起来就像我在 [=14= 中选择 table ]Ext Js 4.0?

其他一些替代方案也可以。

Answer 1

正如 MarthyM 在下面提到的那样，使用 'overCls' 而不是听众更容易。在您的网格声明中：

overCls: 'borderred'

你的风格sheet:

.borderred { border: 1px solid red; }

我在这里使用 'overCls' 为 ExtJS 4.0.7 更新了 fiddle：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');
         }
     }
 }

Answer 2

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

overCls: 'gridHover'

这会在您的网格上添加一个 CSS class，当鼠标悬停在它上面时。然后你只需要在 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

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

How to highlight a grid on mouseover in Extjs 4.0?

javascript

css

extjs