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 跨域访问问题解决方法
Dec 02 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
JavaScript 的继承
Oct 01 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
javascript事件模型介绍
May 31 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
JS中min函数实例讲解
Feb 18 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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
str_replace只替换一次字符串的方法
2013/04/09 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python OS模块常用函数说明
2015/05/23 Python
Python实现新浪博客备份的方法
2016/04/27 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
高三毕业生自我鉴定
2013/12/20 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
品酒会策划方案
2014/05/26 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
Python Numpy库的超详细教程
2022/04/06 Python