ExtJS based on values is it possible to choose which item to show or hide?

I use Ext开发者_StackOverflow社区.grid.ColumnModel to show data, is there any possiblity to hide/show data depending on some row field value?

        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     
    },]

I tried with render, but can't handle it works as I expected.

You should use the .filterBy() function on the store that contains all the data that you are loading in to the column model.

Something like this should work:

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

UPDATED

If you want to apply a certain CSS class to any rows based on data you could apply something as follows to your grid:

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

where "image-class" and "no-image-class" are defined in your CSS file and define the required behaviour

Your renderer code is incorrect. There is no need to use the index as the record is passed to the renderer explicitly...

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