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

Posted

技术标签:

【中文标题】如何根据列渲染器中的值在网格列中显示图像?【英文标题】: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 中实现字形。

以上是关于如何根据列渲染器中的值在网格列中显示图像?的主要内容,如果未能解决你的问题,请参考以下文章

ExtJs Grid通过渲染器中的ajax填充列

有没有办法在 ag 网格中的 2 个单元格渲染器之间传递数据?

如何根据ext js网格中另一个单元格的值向单元格添加类

ExtJS 4.1 - XTemplate 中的工具提示

根据上一列中的值在 Python Dataframe 中构建行

根据其他列中的值在 python 3 (pandas) 数据框中创建新列