ExtJS Grid中文字链接点击事件的更合理的处理办法

原文出处：http://showframework.tumblr.com/post/18375146539/extjs-grid
我们经常会给GridPanel中的某一个column加一个renderer，让它的内容可以变成一个链接，例如：

resultRenderer: function (value) {

return ‘<a href=”http://www.example.com/” >查看</a>’;

}

这样在Grid中，查看那两个字就变成链接了
如果点击这个查看的时候，想弹出窗口，那么我们最普通的方式，就是给链接加一个onclick响应函数，
onclick这里调用的函数，必然是通过全局的方式了，这样做有个缺点，就是全局函数的扩散，造成可维护性下降

其实，有一种更合理的处理办法，不论renderer中生成的是链接，还是其他的内容比如button，都是通用的
代码如下
首先给grid添加一个cellclick事件的响应函数

1	`grid.on(‘cellclick’, grid.onCellClick, grid);`

响应函数中做如下处理

onCellClick: function (grid, rowIndex, columnIndex, e) {

if (e.getTarget().innerHTML === ‘查看’ ) { //借助事件的target来判断，这里是链接可以这样判断，其他方式亦可

var record = grid.getStore().getAt(rowIndex); // Get the Record

var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name

var data = record.get(fieldName);//这个data就是点击的单元格的数据了，一定有用的

if (fieldName == ‘this_column’) {

//如果是这一列，做这个事

}

if (fieldName === ‘that_column’) {

//如果是另外一列，做另外的事

}

这个方法，不仅可以处理链接，简化一下就是处理某个单元格点击，onCellClick的作用域还是grid，这个是重点， onCellClick还是在grid这个组件之内，而没有产生全局调用，另外点击

本文转自yunlielai51CTO博客，原文链接：http://blog.51cto.com/4925054/1399612，如需转载请自行联系原作者

ExtJS Grid中文字链接点击事件的更合理的处理办法相关推荐

Extjs grid禁用头部点击三角下拉菜单
表格头部的三角在点击的时候禁止出现下拉菜单,给每一列添加属性menuDisabled:true xtype:'grid', enableColumnResize:false, columns:[ {t ...
微信小程序组件movable-area事件穿透，事件冒泡，movable-area遮盖/遮挡住其他元素之后点击事件不穿透/不冒泡解决办法
先上解决办法: .movable-area{position:fixed;top:0;left:0;width:750rpx;height:100%;pointer-events: none; } . ...
关于前端 js 点击事件重复执行
前言描述:本文用来记录,解决点击事件重复执行的几种办法. 实例代码: myChart.on("click",function (){}) 解决办法: 一.使用 myChart. ...
微信小程序执行 wx.reLaunch 后，点击事件失效【已解决，亲测有效】
在使用微信小程序中,有一个场景需要调用 wx.reLaunch到A页面 wx.reLaunch({url: '/pages/index/nologin/nologin', }) 但是 reLaunch ...
模拟grid点击事件
当一个grid.panel里的store加载完毕后,模拟点击事件.只需在store加载事加监听即可.例子如下: onReloadCrawlerStore: function(me, records, ...
python ttk Treeview的插入、清空、各种点击事件、获取条目值、标题单击排序
~ 昨天整了一天Tkinter的treeview,发现中文的教程乃至提问都很少,其中两个问题的解决都是靠steakoverflow上找到的-- 在这里放出来我遇到并解决的问题,大家以后可能遇到的话就能 ...
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
文章目录一.浮动按钮及点击事件二.底部显示按钮组件三.手势检测器组件四.image_picker 完整代码示例五.相关资源一.浮动按钮及点击事件一般使用 Scaffold 组件作为界面的 ...
ALV GRID学习笔记----Double Click事件
10月底的时候进行了BC412课程的培训,课后自己做了一些实验,从今天开始就将这些实验记录下来,以便于以后需要使用的时候能够查询一下!(很遗憾的是公司组织了很多的培训,但是在实际工作中很少能够运到,所 ...
ExtJs Grid分页时序号自增的实现,以及查询以后的序号的处理
ExtJs Grid分页时,默认情况下每页的序号都是从1起始的,这往往不符合我们的习惯.这里实现了序号的自动增加. 如:每页20条第一页从1开始,第二页从21条开始. 先定义一个全局变量如record ...

ExtJS Grid中文字链接点击事件的更合理的处理办法

ExtJS Grid中文字链接点击事件的更合理的处理办法相关推荐

最新文章

热门文章