Extjs Modern Grid column cell tool conditional iconCls

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?

score 2 · Accepted Answer · answered Dec 02 '17 at 10:07

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

Please highlight the itemConfig in the answer... Without it it doesn't work. itemConfig: { viewModel: true }, — klodoma, Nov 20 '19 at 10:18

score 1 · Answer 2 · answered Dec 02 '17 at 07:05

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

Extjs Modern Grid column cell tool conditional iconCls

2 Answers2