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?
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'));
}
}
}
}
}]
});
}
});