How to add a filter icon for ext js column after applying filter

0
votes

As per the documentation,it is mentioned that we can use the css class to customize the style of column after applying filter but when I try to add an image to the class,it never loads

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

Please suggest on how to proceed further.Thanks!

1
extjsextjs4extjs5extjs6

1 Answers

0
votes

You could do it like this:

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

Or if you are using any theme that uses FontAwsome, the last bit could be like this:

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

Consider that sample FIDDLE