应用过滤器后,在Extjs网格列中添加一次过滤器图标

应用过滤器后,在Extjs网格列中添加一次过滤器图标,extjs,extjs3,Extjs,Extjs3,我们是否可以在应用过滤器的情况下高亮显示列。当我们进行排序时,同样的方法是在单个列级别添加一个图标来通知用户 提前谢谢。这个问题有点类似于 要实现这一点,我的方法是,首先你需要准备一个css,它拥有你想要的图像。 您的css代码看起来像,或者根据您的需要进行更改: .filtered-column { background:url(http://dev.toadformysql.com/webhelp/...fiedFilter.png) no-repeat !important;

我们是否可以在应用过滤器的情况下高亮显示列。当我们进行排序时,同样的方法是在单个列级别添加一个图标来通知用户


提前谢谢。

这个问题有点类似于 要实现这一点,我的方法是,首先你需要准备一个css,它拥有你想要的图像。 您的css代码看起来像,或者根据您的需要进行更改:

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

newCls : 'filtered-column',
然后在您自己的
updateColumnHeadings
方法中使用以下代码

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.
        }
    }
},
updateColumnHeadings:function(){
var view=this.grid.getView(),
i、 透镜,滤波器;
if(view.mainHd){
对于(i=0,len=view.cm.config.length;i
注意:我检查了我的过滤器,它工作正常。如果您的过滤器是在您的需求中定制的,那么它可能无法工作,但理想情况下,这是更新应用过滤器标题的方法