Extjs Modern Grid 列单元格工具条件iconCls

Question

在网格列配置中，我有一个单元格工具，我希望该工具的 iconCls 以行记录数据为条件。

},{ text: 'Favorite', //dataIndex: 'favorite', width: 80, align: 'center', cell: { tools: { play : { iconCls:'x-fa yellow fa-star', align:'center', tooltip : 'Toggle Favorites', handler: 'onFavoriteToggle' } } } }, { 我希望图标 cls 基于行记录收藏夹属性 (true/false)，为 fa-star 或 fa-star-o 有谁知道如何做到这一点？

Answer 1

您可以使用 renderer method of gridcolumn.

在renderer函数中你需要使用gridcell.setTools()方法。

在此FIDDLE中，我根据您的要求创建了一个演示。希望这会指导您或帮助您实现您的要求。

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

Answer 2

我在其他地方回答过这个问题，所以我也会 post 在这里提供给其他感兴趣的人。您可以使用绑定来做到这一点：

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

Extjs Modern Grid 列单元格工具条件iconCls

Extjs Modern Grid column cell tool conditional iconCls

extjs

extjs6-modern