如何在ExtJS Grid中具体添加图片状态或按钮的方法

在 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 事件。