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 相关文章推荐
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
node.js 动态执行脚本
Jun 02 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 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
解析strtr函数的效率问题
2013/06/26 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
一个简易时钟效果js实现代码
2020/03/25 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python处理Excel文件实例代码
2017/06/20 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
解析python实现Lasso回归
2019/09/11 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python2 对excel表格操作完整示例
2020/02/23 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
adidas美国官网:adidas US
2016/09/21 全球购物
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
师生聚会感言
2014/01/26 职场文书
工程师岗位职责规定
2014/02/26 职场文书
环保志愿者活动总结
2014/06/27 职场文书
代收款委托书范本
2014/10/01 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
海弦WR-800F
2022/04/05 无线电