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

Question

我想在还使用分组功能的网格中的选定行中添加框阴影。 最初，我只是将框阴影应用于所选行的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元素上的框阴影（至少不是没有设置）它们的显示属性将被阻止，这将彻底破坏布局）。

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

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

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

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

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

谢谢与问候

附言：我也在Sencha论坛上问了这个问题

Answer 1

有了上面提到的arthurakay的建议，我能够通过使用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

谢谢与问候

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

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

谢谢与问候