Question

当我使用某种颜色将鼠标移到该网格上时，或者通过更改边框或其他一些看起来好像我在 Ext Js 4.0 中选择表格的方式时，我想要突出显示整个网格？

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

Answer 1

正如MarthyM在下面提到的更容易使用＆＃39; overCls＆＃39;而不是听众。在您的网格声明中：

overCls: 'borderred'

在你的样式表中：

.borderred { border: 1px solid red; }

我已经使用＆＃39; overCls＆＃39;更新了小提琴。对于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');
         }
     }
 }

Answer 2

您唯一需要做的就是使用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

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

2 个答案: