Question

I am using Extjs4.1.0.

I have a grid with an actioncolumn. I have to change the icons in this actioncolumn based on some conditions.

I am using three getClass methods to render the icons in this column.

xtype: 'actioncolumn',
items: [
{
    getClass: function (v, meta, rec)
    {
        if (rec.get('fieldDeleteFlag') == false) return 'x-grid-del-css';
        else return '';
    },
    handler: function (grid, rowIndex, colIndex)
    {
        alert('delete');
    }
},{
    getClass: function (v, meta, rec)
    {
        if (rec.get('fieldDeleteFlag') == false) return 'x-grid-edit-css';
        else return '';
        handler: function (grid, rowIndex, colIndex)
        {
            alert('edit');
        }
},{
    getClass: function (v, meta, rec)
    {
        if (rec.get('fieldDeleteFlag') == true) return 'x-grid-activate-css';
        else return '';
    }
    handler: function (grid, rowIndex, colIndex)
    {
        alert('Activate');
    }
}],    

grid.getStore().getAt(rowIndex).set('change',false);

So, if the flag is false, i need to have two icons as edit and delete. If the flag is true, i have only activate icon.

When i click on the activate icon handler, i will set the flag column as false and i have only the edit and delete icons for this row.

The icons are coming perfectly when the grid is rendering. But, when i click on the activate handler, i am unable to remove the activate icon and display the edit and delete icons.

Can any body tell me how to do this…

Answer 1

You can use grid.refresh() after setting the cell value.

handler: function(grid, rowIndex, colIndex) {
    var rec = store.getAt(rowIndex);
    var change = rec.get('change');
    rec.set('change', -change);
    grid.refresh();
}