Question

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

        items : [{
        icon : '../../shared/icons/information.png',
        // 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     
    },]

我尝试使用渲染，但无法按照我的预期处理它。

Answer 1

您应该在商店中使用.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”并定义所需的行为

Answer 2

您的渲染器代码不正确。当记录显式传递给渲染器时，无需使用索引...

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

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

2 个答案: