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 style 中visibility和display之间的区别
Jan 22 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
layui实现下拉框三级联动
Jul 26 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
javascript canvas API内容整理
Feb 16 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
js+css实现打字效果
2020/06/24 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
浅析vue-router原理
2018/10/19 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
Python实现的批量下载RFC文档
2015/03/10 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
社会实践自我鉴定
2013/11/07 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
小学生新年寄语
2014/04/03 职场文书
企业新年寄语
2014/04/04 职场文书
园林系毕业生求职信
2014/06/23 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书