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

时间:2016-08-29 15:26:05

标签: extjs extjs3

无论如何,我们可以使用过滤器突出显示列。当我们对图标进行排序时,会在单个列级别添加相同的方式来通知用户。

提前致谢。

1 个答案:

答案 0 :(得分:2)

这个问题与Filter Header Update有点类似 任何方式达到这个我的方法是首先你需要准备一个css,其中有图像你想要什么。 您的css代码看起来像或根据您的需要进行更改:

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

在过滤器类中调用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.
        }
    }
},

注意:我在“我的过滤器”中检查了它的确有效。如果您的过滤器是根据您的要求自定义的,那么它可能无法正常工作,但理想情况下,这是更新应用过滤器标头的方法。