How to display image in column of grid based on value in column's renderer?

Question

I have a grid panel like:

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'
    }
});

I am loading the store of that in grid afterrender event. I want to set the image in the State column based on the value of state(free/busy). Its not working.

How should I do it?

you can Check this:[link](https://fiddle.sencha.com/#fiddle/j23) here value is set in state column I want image to be their based on value. — Abhinav Bhardwaj, Mar 03 '15 at 08:28

score 0 · Answer 1 · answered Mar 03 '15 at 08:35

You can use a renderer to augment the displayed value of the cell.

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

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

In renderer How Should I pass image (image with glyph) so that it display it in column. returning 'xf023@FontAwesome' display text instead of image. — Abhinav Bhardwaj, Mar 03 '15 at 09:18
Pass in html rather than an Ext.Image as you will get better performance. Or alternatively look at this http://stackoverflow.com/a/11473354/1672632 — Rob Schmuecker, Mar 03 '15 at 09:40
OK - then look at the pervious link I sent you or look at how to implement the glyphs in HTML. — Rob Schmuecker, Mar 03 '15 at 09:49

How to display image in column of grid based on value in column's renderer?

1 Answers1