Adding Filter Icon in Extjs Grid Column once after Filter is applied

问题

Is there anyway we can highlight column with filter is applied. The same way when we do sorting an icon is added on the individual column level to notify user.

Thanks in advance.

回答1:

This question is bit similar to Filter Header Update Any way to Achive this what my approach is first You need to prepare one css which having image what exactly you want. Your code for css look like or change as per your need :

.filtered-column {    
 background:url(http://dev.toadformysql.com/webhelp/...fiedFilter.png) no-repeat !important; 
 background-position: calc(100% - 5px) 3px !important;
}

In filter class call the css

newCls : 'filtered-column',

Then In your own updateColumnHeadings method and use the below code.

updateColumnHeadings : function () {
    var view = this.grid.getView(),
        i, len, filter;
    if (view.mainHd) {
        for (i = 0, len = view.cm.config.length; i < len; i++) {
            filter = this.getFilter(view.cm.config[i].dataIndex);
            Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.newCls); // In this line we are adding the newCls which will aply for filter.
        }
    }
},

Note : I checked in My filter and it works. If your filter is customize in your requirement then there is chance it won't work but ideally this is the way to update applied filter header.

来源：https://stackoverflow.com/questions/39209855/adding-filter-icon-in-extjs-grid-column-once-after-filter-is-applied