如何根据列渲染器中的值在网格列中显示图像？

Posted 2023-02-26

【中文标题】如何根据列渲染器中的值在网格列中显示图像？

【英文标题】：How to display image in column of grid based on value in column's renderer?

【发布时间】：2015-03-03 08:07:50

【问题描述】：

我有一个像这样的网格面板：

Ext.define('Demo.view.main.content.source.Ex', 
    extend: 'Ext.grid.Panel',
    requires: [
        'Demo.store.main.content.source.Ex',
        'Demo.view.main.content.source.ExController',
    ],

    xtype: 'app-main-content-ex',

    title: 'Example',

    store: 'Demo.store.main.content.source.Ex',

    controller:'main-content-source-ex',

    //multiSelect: false,
    columnLines: true,

    initComponent: function() 
        var store = Ext.create('Demo.store.main.content.source.Ex', 
            storeId: 'app-main-content-source-exstore'
        );
        Ext.apply(this, 
            store: store
        );

        this.columns= [

            
                text     : 'Driver Name',
                flex     : 3,
                sortable : false,
                dataIndex: 'name'
            ,
            
                xtype: 'gridcolumn',
                getEditor: function(record) 
                    console.log(record.get('state'));
                    var value;
                    if (record.get('state') == 'free') 

                        value = 'xf09c@FontAwesome'
                     else 
                        value = 'xf023@FontAwesome'
                    
                    return Ext.create('Ext.grid.CellEditor', 
                        field:
                            xtype: 'image',
                            glyph: value
                        
                    );
                ,
                 text     : 'State',
                flex    : 1,
                dataIndex: 'state'
            ]

        this.callParent();
    ,
    listeners:
        afterRender: 'setUpInfo'
    
);

我正在网格 afterrender 事件中加载该存储。我想根据状态（空闲/忙碌）的值在状态列中设置图像。它不工作。

我该怎么做？

【问题讨论】：

你能在 fiddle.sencha.com 上做一个最小可行的演示吗？

你可以检查这个：link 这里的值设置在状态列我希望图像是基于值的。

【参考方案1】：

您可以使用渲染器来增加单元格的显示值。

        columns: [
            xtype: 'gridcolumn',
            dataIndex: 'name',
            text: 'Driver Name',
            flex: 1,
            editor: 
                xtype: 'textfield'
            
        , 
            xtype: 'gridcolumn',
            renderer: function(value) 
                if (value == 'free') 

                    return 'xf09c@FontAwesome'
                 else 
                    return 'xf023@FontAwesome'
                
            ,
            getEditor: function(record) 
                var value;
                if (record.get('state') == 'free') 

                    value = 'xf09c@FontAwesome'
                 else 
                    value = 'xf023@FontAwesome'
                
                return Ext.create('Ext.grid.CellEditor', 
                    field: 
                        xtype: 'image',
                        glyph: value
                    
                );
            ,
            text: 'State',
            flex: 1,
            dataIndex: 'state'
        ]

文档：-http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.grid.column.Column-cfg-renderer

【讨论】：

在渲染器中我应该如何传递图像（带有字形的图像），以便将其显示在列中。返回 '​​xf023@FontAwesome' 显示文本而不是图像。

传入 html 而不是 Ext.Image，因为您将获得更好的性能。或者看看这个***.com/a/11473354/1672632

我可以传递html格式的图片。但我想使用字形。

好的 - 然后看看我发给你的上一个链接，或者看看如何在 HTML 中实现字形。