Show image icon in a grid panel cell in extjs 4

Question

I want to show a icon in my grid which column name is status. And the icon is web-inf/images/iconname.png But I am not being able to do it. Can anyone please help me on this? My code is given below:

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) {
                    return '<img src="images/TIC01001.png" />';
                } else {
                    return 'something';
                }
            }
        }, {
            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;
    }
});

Answer 1

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

Answer 2

I think the scope of your this variable is wrong in your renderer function.

var a = this.checkUncheck(intime, outtime); //<---this line
if(a >= 2) {
       return '<img src="images/TIC01001.png" />';
}
else {
       return 'something';
}

Are you sure that it comes in the checkUncheck function? What you can do is this:

initComponent: function() {
    var me = this;

//rest of code...


//renderer function:
var a = me.checkUncheck(intime, outtime);

I think that's your problem.