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

你确定它出现在checkUncheck函数中吗？ 你能做的是：

initComponent: function() {
    var me = this;

//rest of code...


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

我认为这是你的问题。