ExtJS 6 Remove focused elements outline

Question

How I can remove focused elements (tab, grid cells, etc.) outline in my ExtJS 6 app? Is there any global config for this?

Example:

I managed to remove outline for tabs, buttons and grid cells with this CSS rules

* {
  outline: none !important;
}

.x-grid-item-focused .x-grid-cell-inner:before {
  border: 0;
}

but unfortunatly for some focused elements it doesnt work. I noticed that for some components ExtJS add different CSS rules to add border / outlines.

For example to border layour split separator component added :after with outlines.

Is there any complex solution for this issue?

P.S. Why on Earth Sencha add this styles to framework without ability to remove it. IMO it's pretty annoying and complicates theming.

you dont have to try it in css you can try headerBorders: false, rowLines: false, — Salman hassan
add these to your grid config maybe thats what you looking for — Salman hassan
@salman-hassan-okz Nope, its not. It seems like outline issue, not border. — Sergey Novikov
you can make it easy by uploading an image so people can check what you want ;) — Salman hassan

Salman hassan Salman hassan · Accepted Answer · 2017-03-22T16:24:41

I had kinda same problem And i found this good blog about row-cell
here is the Blog
And here is the example Fiddle

here is the css code which remove grid focused row-cell border

.x-grid-item-focused .x-grid-cell-inner:before {
border: 0;

}