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 相关文章推荐
document.all与WEB标准
May 13 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 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生成16位随机数的代码(两种方法)
2014/09/16 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
简单实现php上传文件功能
2017/09/21 PHP
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
python基础教程之类class定义使用方法
2014/02/20 Python
跟老齐学Python之用Python计算
2014/09/12 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
详解python 注释、变量、类型
2018/08/10 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python 如何快速复制序列
2020/09/07 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
新教师教学工作总结
2015/08/14 职场文书