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

Answer 2

我认为您的渲染器函数中this变量的范围是错误的。

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

你确定它出现在检查取消检查功能中吗？你可以做的是：

initComponent: function() {
    var me = this;
//rest of code...

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

我认为这是你的问题。