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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
Python语法快速入门指南
2015/10/12 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
关于反爬虫的一些简单总结
2017/12/13 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
python 实现性别识别
2020/11/21 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
网上商城创业计划书范文
2014/01/31 职场文书
高一学生评语大全
2014/04/25 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
小学教师党员承诺书
2015/04/27 职场文书
《植树问题》教学反思
2016/03/03 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis