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 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 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利用cookie实现访问次数统计代码
2011/05/19 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php实现读取内存顺序号
2015/03/29 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
技术股东合作协议书
2014/12/02 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server