Extjs Modern Grid column cell tool conditional iconCls - extjs

Question

In a grid column config, I have a cell tool for which I'd like the iconCls of the tool to be conditional on the row record data.
},{
text: 'Favorite',
//dataIndex: 'favorite',
width: 80,
align: 'center',
cell: {
tools: {
play : {
iconCls:'x-fa yellow fa-star',
align:'center',
tooltip : 'Toggle Favorites',
handler: 'onFavoriteToggle'
}
}
}
}, {
I'd like the icon cls to be based on the row record favorite property (true/false), to be fa-star or fa-star-o
Does anyone know how to accomplish this?

Answer 1

I answered this elsewhere so I'll post it here as well for anyone else interested. You can use binding to do it:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Viewport.add({
xtype: 'grid',
itemConfig: {
viewModel: true
},
store: {
data: [{
name: 'A',
fav: false
}, {
name: 'B',
fav: true
}]
},
columns: [{
dataIndex: 'name'
}, {
text: 'Favorite',
width: 80,
align: 'center',
cell: {
tools: {
play : {
bind: {
iconCls:'x-fa yellow {record.fav ? "fa-star" : "fa-star-o"}',
},
align:'center',
tooltip : 'Toggle Favorites',
handler: function(grid, context) {
var r = context.record;
r.set('fav', !r.get('fav'));
}
}
}
}
}]
});
}
});
Fiddle

Answer 2

You can use renderer method of gridcolumn.
In renderer function you need to use gridcell.setTools() method.
In this FIDDLE, I have created a demo as per you requirement. Hope this will guide you or help you to achieve you requirement.
var companyStore = Ext.create('Ext.data.Store', {
fields: ['name', 'price', {
name: 'lastChange',
type: 'date'
}, {
name: 'favorite',
type: 'boolean'
}],
autoLoad: true,
pageSize: null,
proxy: {
type: 'ajax',
url: 'company.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Grid', {
title: 'Company Data',
store: companyStore,
columns: [{
text: 'Company',
flex: 1,
dataIndex: 'name'
}, {
text: 'Price',
flex: 1,
dataIndex: 'price',
formatter: 'usMoney'
}, {
text: 'Last Updated',
flex: 1,
dataIndex: 'lastChange',
formatter: 'date("d M Y")'
}, {
width: 100,
text:'Favorite',
align: 'center',
renderer: function (value, rec, col, cell) {
cell.setTools({
play: {
iconCls: rec.get('favorite') ? 'x-fa yellow fa-star' : 'x-fa yellow fa-star-o',
tooltip: 'Toggle Favorites'
}
});
}
}],
height: 500,
layout: 'fit',
renderTo: Ext.getBody(),
fullscreen: true
});