javascript - 具有分组功能的ExtJS 5网格:带框阴影的选定行

我想在还使用分组功能的网格中的选定行中添加框阴影。最初，我只是将框阴影应用于所选行的table元素：

.x-grid-item-selected {
    box-shadow: 0 0 6px 2px rgb(119, 119, 119) inset;
}

不幸的是，组中第一行的表元素还包含组头，当我选择组中的第一行时，该表头会给我以下结果：



另外我不能将框阴影应用于网格行（tr）的.x-grid-item-selected .x-grid-row元素，因为chrome不支持tr元素上的框阴影（至少不支持将它们的显示属性设置为block）完全破坏版面）。

将框阴影应用于每个单元格（.x-grid-item-selected .x-grid-cell）显然不会给我所需的外观：



这就是我希望所选行的实际外观（只是为了完整性）：



在ExtJS 4中，我能够使用RowWrap功能来实现此目的，该功能已在ExtJS 5中删除。

如果有人可以给我一些帮助，我将不胜感激！

这是一个玩弄的小提琴：https://fiddle.sencha.com/#fiddle/jkv

谢谢与问候

诗：我也曾在Sencha Forums上问过这个问题

最佳答案

考虑到arthurakay谁是commented above的建议，我能够通过使用linear-gradients而不是box shadows来找到合适的解决方案，它看起来像这样：

.x-grid-item-selected .x-grid-cell {
    background:
        linear-gradient(top, rgb(119, 119, 119), transparent 6px),
        linear-gradient(bottom, rgb(119, 119, 119), transparent 6px);

    // Browser specific prefixed versions...
}

.x-grid-item-selected .x-grid-cell:first-child {
    background:
        linear-gradient(top, rgb(119, 119, 119), transparent 6px),
        linear-gradient(bottom, rgb(119, 119, 119), transparent 6px),
        linear-gradient(left, rgb(119, 119, 119), transparent 6px);

    // Browser specific prefixed versions...
}

.x-grid-item-selected .x-grid-cell:last-child {
    background:
        linear-gradient(top, rgb(119, 119, 119), transparent 6px),
        linear-gradient(bottom, rgb(119, 119, 119), transparent 6px),
        linear-gradient(right, rgb(119, 119, 119), transparent 6px);

    // Browser specific prefixed versions...
}

由于这仍然有些麻烦，因此我非常感谢您提供更多输入以更“优雅”的方式解决此问题。

这是工作的小提琴：https://fiddle.sencha.com/#fiddle/jrh

谢谢与最诚挚的问候

关于javascript - 具有分组功能的ExtJS 5网格:带框阴影的选定行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29093192/