网络编程 
首页 > 网络编程 > 浏览文章

Extjs grid添加一个图片状态或者按钮的方法

(编辑:jimmy 日期: 2025/5/15 浏览:3 次 )
extjs的grid中我们经常需要添加一个图片状态或者按钮,总结一下自己用过的方法:

一、状态表示:
复制代码 代码如下:
renderer:function(value){
if(value==0){
return "<img src='images/icons/cancel.png'>";
}else if(value==1){
return "<img src='images/icons/accept.png'>";
}
return value;
}

在columns中列添加renderer标识状态,效果图如下:

http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png

二、事件处理:

直接给img添加onclick事件:
复制代码 代码如下:
<img style="cursor:pointer;" onclick="updateRecord(\''+sn+"@"+ss+"@"+record.get("standardId")+'\');" src=\'${ctx}/img/edit.png\' alt=\'明细维护\' title=\'明细维护\'>'

事件是将需要的数据传递过去。

还有一种方法就是给grid添加单元格点击事件:
复制代码 代码如下:
listeners: {
cellClick: viewDoc
}

function viewDoc(grid, rowIdx, colIdx, e) {
var action = e.getTarget().value;

}

这样就可以得到点击的单元格,再添加事件处理即可。

三、可以使用'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);
//。。。
}
]}

这样也可以在grid单元格中添加图片。
上一篇:javascript替换已有元素replaceChild()使用介绍
下一篇:ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap