How to add a grid of image buttons in ExtJS

Question

I am new to ExtJS and I want to add something like a favorite button to each row of a data grid. I have gone through almost all sources after a lot of googling but I have not found anything. If anyone has a clear cut idea about how this can be done, please let me know.

Answer 1

First of all adding ExtJS Component inside grids is not supported by default, and the tutorials I've seen out there are kinda hacky. So this is what I would do.

1. I assume your grid is bound to a store, and each record in the store is a row in your grid.
2. I assume you have a field in each record that represents the "fav" status of that record, maybe a boolean value.

if the above assumptions are true, I've done something like this before:

• add a column in your grid with id "fav-col" that has the dataIndex pointing to the fav field of your store.

{
    id : 'fav-column', 
    dataIndex : 'fav',
    sortable : true,
    hideable : false,
    menuDisabled : true,
    fixed : true,
    width : 20, 
    renderer : renderFav
}

• add a renderer to that column that render different HTML depending if the row is fav'ed.

function renderFav(favAdded, metaData, record){
    if (favAdded === true){
        return 'fav added'; //something to represent already added to favourite  ;
    }else{
        return 'fav not added'; //something to represent non-fav'ed row;
    }
}

• add a listener to 'cellclick' event on the grid, check if the cell being clicked on is a fav cell and toggle the fav value of the record, the grid will re-render automatically once the data in the store is changed

cellclick : function(grid, cellEl, cellIdx, record, rowEl, rowIdx, evtObj){
    if (this.columns[cellIdx].getId() === 'fav-col'){
        record.set('fav', !record.get('fav')); //toggle the fav state
        grid.getStore().sync(); //if the store is a REST store, update backend
        record.commit(); //commit the record so the red triangle doesn't show
        this.doLayout(); //might not need this.
    }
}