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 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JS面向对象编程详解
Mar 06 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
JavaScript文档对象模型DOM
Nov 20 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
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php时间计算相关问题小结
2016/05/09 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
浅谈django中的认证与登录
2016/10/31 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
投资建议书模板
2014/05/12 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
谢师宴答谢词
2015/01/05 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
开票证明
2015/06/23 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL