Extjs grid column里添加button等html标签,并增加点击事件
2023-09-27 14:23:51 时间
Extjs里有个actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button
如何能在column里增加html标签,并给button添加事件呢?
1. 首先,在column里重写renderer方法,方法里拼html语句
View里主要代码如下:
columns: [{ header: 'Complex column', width: 90, renderer: function(value, cellmeta, record) { var display="Text"; display+='</br>'; display+='<input type="image" class="add" src="extjs/resources/themes/images/spinner.gif" alt="Add" />'; display+='<input type="image" class="edit" src="extjs/resources/themes/images/spinner.gif" alt="Edit">'; display+='<input type="image" class="delete" src="extjs/resources/themes/images/spinner.gif" alt="Delete">'; return display; } }]
2. 在Controller里添加事件
init : function() { console.log('The window was rendered'); this.control({ 'ResultPage > grid[id=resultGrid]':{ cellclick:this.cellClick } }); }, cellClick : function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) { console.log("cell clicked"); var add = e.getTarget('.add'); var edit = e.getTarget('.edit'); var del = e.getTarget('.delete'); if (add) { console.log("click add"); } if(edit){ console.log("click edit"); } if(del){ console.log("click del"); } }
这里有一点要注意,html里用class标识,然后在事件里用getTarget('.add')去寻找。我尝试在html里用id,getTarget(id)找不到。
相关文章
- 此上下文中不允许异步操作。启动异步操作的页必须将 Async 特性设置为 true,并且异步操作只能在 PreRenderComplete 事件之前的页上启动。
- 触发事件,检查是否注册过事件的方法
- 【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法(持续更新中...)
- 线程同步工具(三)等待多个并发事件完成
- onclick 事件,获取当前块id
- HTML DOM 事件
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
- 桌面窗体应用程序,FormClosing事件
- 《日志管理与分析权威指南》一3.2.3 Windows事件日志
- read by other session 等待事件。
- 微信小程序开发实现 --- 阻止事件冒泡
- 项目经理问:我怎么有做不完的事情–事件篮方法
- Web 前端 之 html 移动端/PC端元素长按功能的简单封装,实现元素长按事件的触发
- JQuery中阻止事件冒泡方式及其区别
- html-oncontextmenu 事件
- html-oncontextmenu 事件
- JavaScript高级程序设计学习笔记--事件