基于值的ExtJS是否可以选择显示或隐藏哪个项目？

问题描述

| 我使用Ext.grid.ColumnModel来显示数据，是否有可能根据某些行字段值来隐藏/显示数据？

        items : [{
        icon : \'../../shared/icons/@R_110_404[email protected]\',// iconCls: \'icon_stack\',dataIndex : \'path\',renderer : eyefind.util.renderThumbN,tooltip : \'Show Estimator\',renderer : function (row,index) {
                var rec = store.getAt(index);
                var format = rec.data.format;
                var type = rec.data.type;
                if( (type == \'tt1\' || type == \'tt2\') && ((/^Form2/).test(format) ) ) 
                {
                    return return \'<img src=\"../../thumbs/info.png\" height=\"100%\" width=\"100%\">\';   
                }
                else{
                    return \'\';
                }
        },handler : showEstimator     
    },]

我尝试了渲染，但是无法按预期工作。     

解决方法

        您应该在包含要加载到列模型的所有数据的商店上使用.filterBy（）函数。 这样的事情应该起作用：

store.filterBy(function myfilter(rec) {
    var format = rec.data.format;
    var type = rec.data.type;
    if( (type == \'tt1\' || type == \'tt2\') && ((/^Form2/).test(format) ) ) 
    {
        return return true;   
    }
    else{
        return false;
    }    
});

更新 如果要基于数据将某个CSS类应用于任何行，则可以对网格应用以下内容：

view : new Ext.grid.GroupingView({
    getRowClass : function(row,index) {
        var cls = \'\';
        var data = row.data;
        var format = data.format;
        var type = data.type;
        if( (type == \'tt1\' || type == \'tt2\') && ((/^Form2/).test(format) ) )  {
            cls = \'image-class\';
        } else {
            cls = \'no-image-class\';
        }
        return cls;
    }
})

在您的CSS文件中定义了\“ image-class \”和\“ no-image-class \”，并定义了所需的行为     ,        您的渲染器代码不正确。由于记录已明确传递给渲染器，因此无需使用索引。

renderer: function(val,meta,rec,index) {
   var format = rec.get(\'format\');
   var type = rec.get(\'type\');
   if( (type == \'tt1\' || type == \'tt2\') && ((/^Form2/).test(format) ) ) 
   {
       return return \'<img src=\"../../thumbs/info.png\" height=\"100%\" width=\"100%\">\';   
   }
   return \'\';
}