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

Question

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

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

不幸的是，组中第一行的table元素还包含组头，当我选择组中的第一行时，它给了我这个结果：

此外，我无法将框阴影应用于网格行（tr）的.x-grid-item-selected .x-grid-row元素，因为Chrome不支持tr元素上的框阴影（至少没有将其display属性设置为阻塞，这会完全破坏布局）。

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

以下是我希望所选行的实际外观（仅为了完整性）：

在ExtJS 4中，我能够通过使用ExtJS 5删除的RowWrap功能来实现这一目的。

如果有人能给我一些帮助，我真的很感激！

这里有一个小提琴：https://fiddle.sencha.com/#fiddle/jkv

谢谢＆amp;最好的问候

Ps。：我还在Sencha Forums上提出了这个问题

Answer 1

根据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

谢谢＆amp;最好的问候

Answer 2

我刚刚找到了另一种解决方案，它实际上更符合我的需求，因为linear gradient的使用干扰了其他一些风格（例如第一个单元格的背景图像取决于内容，......）。

此解决方案使用伪元素after：

.x-grid-item-selected .x-grid-row:after {
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    box-shadow: 0 0 6px 2px rgb(119, 119, 119) inset;
}

工作小提琴：https://fiddle.sencha.com/#fiddle/jrm

这种方法的唯一缺点是我必须设置一个固定的高度。 再一次，如果有人想出一个更好的方法，我真的很感激。

谢谢＆amp;最好的问候