在 ExtJS 的 Grid 开发中，经常需要在列中嵌入图片来展示状态或触发操作，这里整理了几种常用做法，供大家参考。
一、状态表示
通过 renderer 函数返回图片标签，根据数据值动态切换图标。这是最直接的方式：
复制代码 代码如下:
renderer:function(value){
if(value==0){
return "
";
}else if(value==1){
return "
";
}
return value;
}
在 columns 中配置该 renderer，就能实现状态图标的显示。效果如下：
二、事件处理
如果需要点击图片触发操作，有两种常见做法。
方法A：直接给 img 添加 onclick 事件
复制代码 代码如下:
'
在 renderer 中拼出带有 onclick 的字符串，将需要传递的数据拼接好即可。
方法B：监听单元格点击事件
复制代码 代码如下:
listeners: {
cellClick: viewDoc
}
function viewDoc(grid, rowIdx, colIdx, e) {
var action = e.getTarget().value;
}
通过 cellClick 事件获取点击的单元格，再根据目标元素判断执行对应的业务逻辑。这种方式代码更集中，适合统一管理。
三、使用 actioncolumn
ExtJS 提供了专门的 actioncolumn 组件，内置图标展示与点击处理，开发更规范：
复制代码 代码如下:
{header:'合格证',sortable:false,width:80,align:'center',scope:this,
xtype:'actioncolumn',
items : [{
icon : '${ctx}/img/details.png',
tooltip : '显示合格证',
handler : function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
//。。。
}
]}
}
在 items 中配置图标路径和点击处理器，handler 里可以通过 rowIndex 获取当前行的数据，适合处理编辑、删除、详情等操作。
以上三种方法可以根据实际场景灵活选择，状态显示用 renderer，简单点击用 onclick，复杂交互用 actioncolumn 或 cellClick 事件。
