ExtJS 6 删除焦点元素大纲答案

【问题标题】：ExtJS 6 Remove focused elements outlineExtJS 6 删除焦点元素大纲
【发布时间】：2017-03-22 12:35:32
【问题描述】：

如何在我的 ExtJS 6 应用程序中删除焦点元素（选项卡、网格单元格等）轮廓？是否有任何全局配置？

例子：

我设法使用此 CSS 规则删除了选项卡、按钮和网格单元格的轮廓

* {
  outline: none !important;
}

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

但不幸的是，对于一些重点突出的元素，它不起作用。我注意到对于某些组件，ExtJS 添加了不同的 CSS 规则来添加边框/轮廓。

例如为边框布局添加了带有轮廓的:after 分割分隔符组件。

这个问题有什么复杂的解决方案吗？

附注为什么在地球上 Sencha 将此样式添加到框架而无法删除它。 IMO 这很烦人并且使主题复杂化。

【问题讨论】：

【解决方案1】：

我遇到了同样的问题，我发现了这个关于行单元格的好博客
这是Blog
这是Fiddle的例子

这里是删除以网格为中心的行单元格边框的 css 代码

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

}

【讨论】：

是的，它就像 Google 中的第一个链接。它解决了网格单元的问题，但对于其他元素（例如边框布局拆分面板）ExtjS 添加其他规则（:after with outline）。而且我相信这不是所有的情况。我正在寻找复杂的解决方案。还是谢谢。

【解决方案2】：

不是 100% 确定您需要什么，但您可以在 var/all.scss 或 packages/local/own-theme/classic/sass/var/view/Table.scss 中设置这些变量

$grid-row-cell-focus-border-color: transparent;
$grid-row-cell-focus-border-width: 0;

【讨论】：