讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

Extjs grid添加一个图片状态或者按钮的方法_extjs

php中文网
发布： 2016-05-16 16:53:30
原创
1487人浏览过

extjs的grid中我们经常需要添加一个图片状态或者按钮，总结一下自己用过的方法：

一、状态表示：

吐司AI
吐司AI

超多功能的免费在线生图网站！拥有全网更齐全的模型库，0门槛使用！

吐司AI 325
查看详情 吐司AI
复制代码 代码如下:

renderer:function(value){
if(value==0){
return "Extjs grid添加一个图片状态或者按钮的方法_extjs";
}else if(value==1){
return "Extjs grid添加一个图片状态或者按钮的方法_extjs";
}
return value;
}

在columns中列添加renderer标识状态，效果图如下：

http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png

二、事件处理：

直接给img添加onclick事件：
复制代码 代码如下:

\'明细维护\''

事件是将需要的数据传递过去。

还有一种方法就是给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单元格中添加图片。

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍_javascript技巧 下一篇：javascript中的循环语句for语句深入理解_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
什么是模板字符串_Javascript中如何使用 模板字符串是JavaScript中用反引号包裹、支持多行文本和${}嵌入表达式的字符串写法，比单/双引号更灵活；支持直接换行、变量插值、运算及函数调用；还可通过标签函数实现高级定制处理。
2025-12-19 22:11:58
288
javascript中的国际化API是什么_如何实现多语言支持 JavaScript国际化依赖Intl对象进行数字、日期、货币等格式化，不处理文本翻译；需结合ICU消息格式资源包、语言检测与动态切换逻辑实现完整本地化。
2025-12-19 22:11:28
478
javascript模块打包是什么_为什么需要Webpack这样的工具？ JavaScript模块打包是将多个JS及非JS资源按依赖合并转换优化为少量浏览器可运行文件的过程；它解决ES6模块的局限性，支持Loader/Plugin扩展、代码分割、TreeShaking等工程化能力。
2025-12-19 22:09:56
474
javascript的Canvas是什么_如何绘制图形和动画？ Canvas是HTML绘图元素，需三步使用：获取画布、获取2D上下文、调用绘图方法；图形绘制分直接矩形与路径类，动画靠requestAnimationFrame循环清空重绘；注意尺寸设置、坐标原点、beginPath()调用及上下文状态管理。
2025-12-19 22:08:48
476
javascript模块打包是什么_Webpack和Vite有何不同？ Vite开发时免打包、按需编译，启动瞬时且HMR精准；Webpack全量构建、兼容性广但冷启动慢；新项目优先Vite，老项目或需深度定制选Webpack。
2025-12-19 22:08:02
352
JavaScript中的“this”关键字如何理解？ JavaScript中this的指向由调用时决定，而非定义时；普通调用指向全局或undefined，对象方法调用指向该对象，构造调用指向新实例，箭头函数继承外层this。
2025-12-19 22:08:02
661
为什么javascript需要严格模式_它能解决哪些潜在问题 严格模式是JavaScript的限制性执行环境，通过"usestrict"启用，能提前暴露隐性错误、防止意外创建全局变量、禁止静默失败操作、限制易错语法，并为ES6+特性提供兼容性基础。
2025-12-19 22:07:02
798
Javascript如何实现排序_如何自定义比较函数？ Array.prototype.sort()默认按字符串Unicode码点排序，数字数组需用(a,b)=>a-b升序或b-a降序；对象数组可按属性用减法或localeCompare排序，多级排序用逻辑或实现优先级。
2025-12-19 22:06:49
848
什么是javascript纯函数_它如何带来可预测性？ 纯函数是只依赖输入参数且无副作用的JavaScript函数，给定相同输入必返回相同输出，不修改外部状态；其核心特征为无副作用和输出仅由输入决定，适用于数据转换等需稳定性的场景。
2025-12-19 22:06:08
511
JavaScript中==和===的区别_类型转换规则 ===严格比较值和类型不转换，==会隐式转换类型后比较；如5==="5"为false，而"1"==true为true；推荐统一使用===，仅null==undefined等极少数场景例外。
2025-12-19 22:05:02
330
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部