extjs grid显示html,Extjs grid column里添加button等html标签，并增加点击事件

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+='';

display+=' class="add" src="extjs/resources/themes/images/spinner.gif" alt="Add" />';

display+='class="edit" src="extjs/resources/themes/images/spinner.gif" alt="Edit">';

display+='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)找不到。

extjs grid显示html,Extjs grid column里添加button等html标签，并增加点击事件相关推荐

html div里添加图片,HTML div 标签插入图片
美工想做一个DIV + CSS 布局的网页页面布局如图 DIV1.DIV2.DIV3为背景层用来放置背景图片需要无缝拼接 DIV1a.DIV1b.DIV1c属于DIV1 DIV2a.DIV2b属于D ...
在线文本替换工具、支持正则表达式（博客园文章里添加Javascript或＜script＞语句）
概况与介绍在博客园发布一篇文章,文章就是<在线文本替换工具 .支持正则表达式>https://www.cnblogs.com/lsllll44/articles/15522697.htm ...
如何在Marketing Cloud的弹出UI窗口里添加扩展字段
需求是我想在这个点击了Create按钮之后显示的弹出对话框里添加Extension field,但是在UI Adaptation模式下,点了Create 之后弹出的是这个按钮的配置界面,而不是我期望的 ...
用ExtJs+Linq+Wcf打造简单grid
本系列文章列表 1)Ajax访问Xml Web Service的安全问题以及解决方案 2)Ajax与WCF交互-WCF之美 3) Ajax与Wcf交互-JSON 4) ExtJs与WCF交互:生成树 ...
extjs 不显示但是不报错
其实这是我犯的最低级的错误,我在火狐上运行,firebug没有报错,而后台的数据能正常获取,但是extjs就是不能显示. <script type="text/javascript&q ...
NGUI 动态向grid里添加项没有裁剪问题的解决方案
补充一点这里说的动态生成的控件是指UIlabel,uitexture之类的UI控件,如果往grid里动态添加预设体是没有问题的即使预设体里会有这些UI控件也是没问题的出现这个问题的原因很简单 ...
extjs 引入html页面,Extjs嵌入html
方式一:使用组件的html属性嵌入html代码,如果html代码中存在参数可以使用字符串拼接的方式拼接html代码. html页面: Extjs中嵌入html Extjs代码: Ext.Loader. ...
模拟grid点击事件
当一个grid.panel里的store加载完毕后,模拟点击事件.只需在store加载事加监听即可.例子如下: onReloadCrawlerStore: function(me, records, ...
Grid网格布局、Grid容器和Grid项目
1. Grid网格布局(基础知识) ①Grid容器(container)和项目(item) 采用grid网格布局的元素,称为Grid容器 display:grid|inline-grid; Grid容 ...

extjs grid显示html,Extjs grid column里添加button等html标签，并增加点击事件

extjs grid显示html,Extjs grid column里添加button等html标签，并增加点击事件相关推荐

最新文章

热门文章