Show image icon in a grid panel cell in extjs 4

extjs, extjs4

Solution

It was so simple. I just changed the resource link like this and it works. It is solved. Here is the code

 Ext.define('Ext4Example.view.attendence.Datagrid' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.datagrid',
    layout: 'fit',
    border: true,
    viewConfig: {
        stripeRows: true,
        forceFit: true,
        emptyText:'No Records to display'
    },   
    hideHeaders: false,
    initComponent: function() {

        this.store = 'Attendences';
        this.width = 429;      
        this.columns = [


        {
            text: 'Status',
            width: 40,
            align: 'center',
            renderer: function(value, metaData, record, row, col, store, gridView){
                            var intime = record.get('intime');
                            var outtime = record.get('outtime');
                            var a = this.checkUncheck(intime, outtime);
                            if(a >= 2)
                               { //change the resource below :
                                    return '<img src="${resource(dir: 'images', file: 'TIC01001.png')}" />';
                            }else{
                                return '<img src="${resource(dir: 'images', file: 'DEL01005.png')}" />';
                            }
                        }
        },{
            text: 'Approval',
            flex: 1,
            align: 'left',
            renderer: function(value, metaData, record, row, col, store, gridView){
                            var intime = record.get('intime');
                            var outtime = record.get('outtime');
                            var a = this.checkUncheck(intime, outtime);
                            if(a >= 2)
                               {
                                     return '<input type="checkbox" checked="true" />';

                            }else{
                                return '<input type="checkbox" />';
                            }
                        },    
            }
        ];

        this.callParent(arguments);
    },
    checkUncheck: function(intime, outtime){
        var count = 0;
        var inhour = intime.getHours() * 60 *60 * 1000;
        var inminute = intime.getMinutes() * 60 * 1000;
        var insecond = intime.getSeconds() * 1000;
        var inmillisec = inhour + inminute + insecond;

        var nine = 9 * 60 * 60 * 1000;
        var five = 5 * 60 * 1000;
        var checkin = nine + five;
        if(checkin >= inmillisec){
            count+=1;
        }
        var outhour = outtime.getHours() * 60 * 60 * 1000;
        var outminute = outtime.getMinutes() * 60 * 1000;
        var outsecond = outtime.getSeconds() * 1000;
        var outmillisec = outhour + outminute + outsecond;

        var six = 18 * 60 * 60 * 1000;
        if(outmillisec >= six){
            count+=1;
        }
        return count;
    }
});

Problem

Original source