应用过滤器后如何为 ext js 列添加过滤器图标

【问题标题】：How to add a filter icon for ext js column after applying filter应用过滤器后如何为 ext js 列添加过滤器图标
【发布时间】：2018-08-24 13:51:07
【问题描述】：

根据documentation，提到我们可以在应用过滤器后使用css类来自定义列的样式，但是当我尝试将图像添加到类时，它永远不会加载

.x-grid-filters-filtered-column {
    font-style: italic;
    font-weight: 300;
    background: url(../static/images/filterIcon.png) no-repeat!important;
    background-position: calc(100% - 5px) 3px!important;
    text-decoration: inherit
}

请就如何进行下一步提出建议。谢谢！

【问题讨论】：

标签： extjs extjs4 extjs5 extjs6

【解决方案1】：

你可以这样做：

.x-grid-filters-filtered-column {
    font-style: italic;
    font-weight: 300;
    text-decoration: inherit
 }

 .x-grid-filters-filtered-column .x-column-header-text-inner {
    background-image: url('/any/image.png');
    background-repeat: no-repeat;
    padding-right: 17px;
    background-position: right center;
 }

或者，如果您使用任何使用 FontAwsome 的主题，最后一点可能是这样的：

.x-grid-filters-filtered-column .x-column-header-text-inner:after {
    margin-left: 13px;
    font: 14px/1 FontAwesome !important;
    content: "\f0b0" !important;
 }

考虑那个示例 FIDDLE

【讨论】：