extjs - 在 extjs 4 的网格面板单元格中显示图像图标

Question

我想在我的网格中显示一个图标，列名是状态。图标是 web-inf/images/iconname.png
但我做不到。任何人都可以帮我解决这个问题吗？我的代码如下:

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

太简单了。我只是像这样更改了资源链接，并且可以正常工作。解决了。这是代码

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