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