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

Question

I'd like to add a box shadow to the selected row in a grid which also uses the grouping feature. Initially I just applied the box shadow to the table element of the selected row:

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

Unfortunately, the table element of the first row in a group also contains the group header which gave me this result when I selected the first row in a group:

Also I can't apply the box shadow to the tr element of the grid row ( .x-grid-item-selected .x-grid-row ) since chrome doesn't support box shadows on tr elements (at least not without setting their display property to block which would break the layout completely).

Applying the box shadow to each cell ( .x-grid-item-selected .x-grid-cell ) obviously doesn't give me the desired look neither:

Here's how I'd like the selected row to actually look like (just for the sake of completeness):

In ExtJS 4 I was able to accomplish this by using the RowWrap feature which was removed with ExtJS 5.

I'd really appreciate if someone could give me some help with this!

Here's a fiddle to play around with: https://fiddle.sencha.com/#fiddle/jkv

Thanks & best regards

Ps.: I've also asked this question on the Sencha Forums

Answer 1

With the suggestion of arthurakay who commented above in mind I was able to find a suitable solution by using linear-gradients instead of box shadows which looks something like this:

.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...
}

Since this is still somewhat cumbersome, I'd really appreciate any more input to solve this in a more "elegant" way.

Here's the working fiddle: https://fiddle.sencha.com/#fiddle/jrh

Thanks & best regards

Answer 2

I just found another solution which actually fits my needs even better since the usage of the linear gradient interfered with some other styles (eg background image of the first cell depending on content, ...).

This solution uses the pseudo element 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;
}

Working fiddle: https://fiddle.sencha.com/#fiddle/jrm

The only downside of this method is that I have to set a fixed height. Again, I'd really appreciate if someone comes up with an even better way to do this.

Thanks & best regards