Monday, 15 August 2011

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


I would like to add a box shadow to the selected row in a grid, which also uses the group's feature. Initially I have applied a box shadow to the selected row's table element:

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

Unfortunately, the table element in the first row of a group also has a group heading, which gave me the result when I selected the first line in a group:

Enter image details here

In addition, The element of the code> tr grid line ( .x-grid-row ) because the chrome box does not support shadows tr

Each cell (<.> .x-grid-item-selected.x-grid-cell ) obviously does not give me the desired look:

Enter image details here

Here's how I actually see the selected row ( Just for completeness):

Enter the image here Ripton

In ExtJes 4 I was able to complete it using the Rowdrap facility which was removed with ExtJs5 Or was it.

I really appreciate it if someone can give me something to help with this!

Here's a fiddle to play with:

Thanks & amp; Best regards

P .: I have also asked about this question

With the suggestion that I was able to find a suitable solution using linear-gradient instead of using the box shadow Something looks like this:

  .x-grid-item-selected .x-grid-cell {background: linear-shield (top, RGB (119, 119, 119), transparent 6px) , Linear-shield (below, RGB (119, 119, 119), transparent 6px); // browser-specific prefix version ...} .x-grid-item-selected .x-grid-cell: first-child {background: linear-shield (top, RGB (119, 119, 119), transparent 6px) Linear-gradient (RGB below (119, 119, 119), transparent 6px), linear-shield (left, RGB (119, 119, 119), transparent 6px); // browser-specific prefix version ...} .x-grid-item-selected .x-grid-cell: last-child {background: linear-shield (top, RGB (119, 119, 119), transparent 6px), Linear-shield (RGB below (119, 119, 119), transparent 6px), linear-gradient (right, RGB (119, 119, 119), transparent 6px); // browser-specific prefix version ...}  

Since it's still a bit cumbersome, I really appreciate any more input to solve it in a more "elegant" way I do

Working here is Bela:

Thanks & amp; Best regards


No comments:

Post a Comment