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

Question

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

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

我该怎么做？

Answer 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