Extjs 现代网格列单元格工具条件 iconCls答案

【问题标题】：Extjs Modern Grid column cell tool conditional iconClsExtjs 现代网格列单元格工具条件 iconCls
【发布时间】：2017-12-01 22:29:31
【问题描述】：

在网格列配置中，我有一个单元格工具，我希望该工具的 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 基于行记录喜爱的属性（真/假），为 fa-star 或 fa-star-o 有谁知道如何做到这一点？

【问题讨论】：

标签： extjs extjs6-modern

【解决方案1】：

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

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

【讨论】：

请在答案中突出显示 itemConfig... 没有它，它不起作用。 itemConfig: { viewModel: true },

【解决方案2】：

你可以使用gridcolumn的renderer方法。

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

【讨论】：