Extjs 如何基于列中的值在网格的列中显示图像'；什么是渲染器？

我有一个网格面板，如：

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事件中的存储。我想根据State（空闲/忙碌）的值在State列中设置图像。它不起作用

---

我应该怎么做？

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

        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'
        }]

---

文档：-

您能在fiddle.sencha.com上制作一个最低限度的可行演示吗？您可以检查：这里的值是在状态列中设置的，我希望图像是基于它们的值。在渲染器中，我应该如何传递图像（带glyph的图像），以便它在列中显示。返回'xf023@FontAwesome'显示文本而不是图像。传入html而不是文本图像，这样可以获得更好的性能。或者看看这个，我可以传递html格式的图像。但是我想使用glyph.OK——然后看看我之前发给你的链接，或者看看如何在HTML中实现glyph。