无法基于动态行数据呈现图标

Question

我试图根据行

的动态数据在sencha触摸网格中显示图标

这是我在列中的代码。但每当我运行应用程序时，我会在列中看到<img>标记而不是实际图像。

renderer:function(value, metaData, record){
    //console.log(value);

    if(value == "0"){

        return "";
    }else if(value == "2"){


          return  '<img src="resources/icons/status_paused.png"/>';


    }else if(value == "3"){

        return "<img src='resources/icons/status_paused.png'/>";

    }else if(value == "4"){

        return "<img src='resources/icons/status_completed.png'/>";
    }
}

这是列

的屏幕截图

到目前为止，我尝试过一些事情，但没有任何效果

metaData.tdCls = "status-update" // where status-update is a class 

metaData.css = "status-update"

Answer 1

从Ext.grid.column.Column来源可以看到，渲染器返回的值将放入元素的nodeValue中：

updateCell: function(cell, record, content) {
    if (cell && (record || content)) {
        cell.firstChild.nodeValue = content || this.getCellContent(record);
    }
}

因此它被视为文本。发生这种情况是因为您在网格的列定义中使用了错误类型的列。请改用Ext.grid.column.Template，将您的值应用于XTemplate并将其放入单元格的innerHtml中，它应该有效。