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

我在其他地方回答了这个问题，所以我也会在这里发布它以供其他感兴趣的人使用。您可以使用绑定来执行此操作：

{{1}}

Fiddle

Answer 2

您可以使用renderer的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
});

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

2 个答案: