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 中的switch表达式使用示例
Jun 03 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
angularjs模态框的使用代码实例
Dec 20 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常用函数小技巧
2008/09/11 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
node.js中的console用法总结
2014/12/15 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Python读写锁实现实现代码解析
2020/11/28 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
求职个人评价范文
2014/04/09 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
考研英语复习计划
2015/01/19 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏