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

Question

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

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

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

我也无法将框阴影应用于网格行 (.x-grid-item-selected .x-grid-row) 的 tr 元素，因为 chrome 不支持 [=12= 上的框阴影] 元素（至少在没有将它们的显示属性设置为块时不会完全破坏布局）。

将框阴影应用于每个单元格 (.x-grid-item-selected .x-grid-cell) 显然也没有给我想要的外观：

下面是我希望所选行实际看起来的样子（只是为了完整起见）：

在 ExtJS 4 中，我能够通过使用随 ExtJS 5 删除的 RowWrap 功能来完成此操作。

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

这里有一个 fiddle 可以玩：https://fiddle.sencha.com/#fiddle/jkv

谢谢并致以最诚挚的问候

Ps.: 我也在 Sencha Forums

上问过这个问题

Answer 1

考虑到 arthurakay who 的建议，我能够通过使用 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...
}

由于这仍然有些麻烦，如果您能提供更多意见以更 "elegant" 的方式解决此问题，我将不胜感激。

这是工作 fiddle：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;
}

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

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

谢谢并致以最诚挚的问候

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

ExtJS 5 grid with grouping feature: Selected row with box shadow

html

javascript

css

extjs

extjs5