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、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
node.js中 stream使用教程
Aug 28 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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
第十一节 重载 [11]
2006/10/09 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
python抓取网页中链接的静态图片
2018/01/29 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python 导入数据及作图的实现
2019/12/03 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
篮球社团活动总结
2014/06/27 职场文书
体育教师研修感悟
2015/11/18 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers