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仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
原生js实现日期选择插件
May 21 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
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支持页面回退的两种方法[转]
2007/02/14 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
婚礼证婚人证婚词
2014/01/08 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
实习生评语
2014/04/26 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
客户答谢会致辞
2015/07/30 职场文书
python 中的@运算符使用
2021/05/26 Python
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL