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

【问题标题】：ExtJS 5 grid with grouping feature: Selected row with box shadow具有分组功能的 ExtJS 5 网格：带有框阴影的选定行
【发布时间】：2015-03-18 17:18:15
【问题描述】：

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

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

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

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

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

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

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

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

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

感谢和问候

Ps.：我也在Sencha Forums上问过这个问题

【问题讨论】：

你能通过背景渐变做同样的事情吗？ Chrome 可能会在 TR 元素上支持这一点，从而为您提供所需的内容。
@arthurakay 直接使用 tr 元素上的渐变不起作用，因为 chrome 实际上将这些渐变应用于所有单元格，但我仍然能够通过将渐变应用于每个单元格来找到解决方案并使用 :first-child & :last-child 伪选择器。非常感谢您的意见！

标签： javascript html css extjs extjs5

【解决方案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

感谢和问候

【讨论】：

【解决方案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

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

感谢和问候

【讨论】：