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


Posted in Javascript onApril 03, 2014

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 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 #Javascript
单击和双击事件的冲突处理示例代码
Apr 03 #Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 #Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 #Javascript
JS获取网页属性包括宽、高等等
Apr 03 #Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 #Javascript
js实现的复制兼容chrome和IE
Apr 03 #Javascript
You might like
PHP中的日期及时间
2006/11/23 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
numpy自动生成数组详解
2017/12/15 Python
Python装饰器简单用法实例小结
2018/12/03 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
python怎么判断模块安装完成
2020/06/19 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
司法局火灾防控方案
2014/06/05 职场文书
保险公司开门红口号
2014/06/21 职场文书
公司合并协议书范本
2014/09/30 职场文书
商务考察邀请函模板
2015/02/02 职场文书
会议主持词开场白
2015/05/28 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
公司保密管理制度
2015/08/04 职场文书
php中pcntl_fork详解
2021/04/01 PHP
OpenCV-Python实现轮廓的特征值
2021/06/09 Python