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 相关文章推荐
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
vue实现移动端触屏拖拽功能
Aug 21 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引擎的发展
2006/11/16 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
原创jQuery弹出层插件分享
2015/04/02 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
Bootstrap table使用方法记录
2017/08/23 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
js实现九宫格布局效果
2020/05/28 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
儿童编程python入门
2018/05/08 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
浅谈python 类方法/静态方法
2020/09/18 Python
python 6种方法实现单例模式
2020/12/15 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
学生自我鉴定
2013/12/18 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
服装店营销方案
2014/03/10 职场文书
护士自我鉴定总结
2014/03/24 职场文书
拔河比赛口号
2014/06/10 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
计划生育证明书写要求
2014/09/17 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
团员个人总结
2015/02/26 职场文书
博士论文答辩开场白
2015/06/01 职场文书
中学音乐课教学反思
2016/02/18 职场文书
python随机打印成绩排名表
2021/06/23 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers