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

Posted 2023-02-26

【中文标题】Extjs 现代网格列单元格工具条件 iconCls

【英文标题】：Extjs Modern Grid column cell tool conditional 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 有谁知道如何做到这一点？

【参考方案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
);