Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法


Posted in Javascript onAugust 15, 2014

Ext4.2+ Ext.grid.plugin.RowExpander存在bug,添加的collapsebody,expandbody无法触发,查看了下 Ext.grid.plugin.RowExpander对应的源代码,没有添加collapsebody,expandbody事件,即使按照网上的方 法重写Ext.grid.plugin.RowExpander的init和toggleRow方法也无法触发 collapsebody,expandbody事件。

解决办法:给grid对象添加collapsebody,expandbody事件,然后给grid配置这2个事件,同时重写Ext.grid.plugin.RowExpander的toggleRow方法,触发grid添加的这2个事件即可。

测试源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext4.2+ Ext.grid.plugin.RowExpander无法触发collapsebody,expandbody事件解决办法</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" rel="external nofollow" />
<script type="text/javascript" src="../../ext-all-debug.js"> </script>
<script>
Ext.override(Ext.grid.plugin.RowExpander, { // Override to fire collapsebody & expandbody
 init: function(grid) {
  this.callParent(arguments);
//  grid.getView().addEvents('collapsebody', 'expandbody');//ext论坛找到的解决办法,这样也无法添加事件
//存储grid对象
this.grid=grid
  this.grid.addEvents('collapsebody', 'expandbody');//给grid对象添加事件
 },
 toggleRow: function(rowIdx, record) {
  var me = this,
   view = me.view,
   rowNode = view.getNode(rowIdx),
   row = Ext.fly(rowNode, '_rowExpander'),
   nextBd = row.down(me.rowBodyTrSelector, true),
   isCollapsed = row.hasCls(me.rowCollapsedCls),
   addOrRemoveCls = isCollapsed ? 'removeCls' : 'addCls',
   ownerLock, rowHeight, fireView;
 
 
  // Suspend layouts because of possible TWO views having their height change
  Ext.suspendLayouts();
  row[addOrRemoveCls](me.rowCollapsedCls);
  Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);
  me.recordsExpanded[record.internalId] = isCollapsed;
  view.refreshSize();
 
 
  // Sync the height and class of the row on the locked side
  if (me.grid.ownerLockable) {
   ownerLock = me.grid.ownerLockable;
//   fireView = ownerLock.getView();
   view = ownerLock.lockedGrid.view;
   fireView=ownerLock.lockedGrid.view;
   rowHeight = row.getHeight();
   // EXTJSIV-9848: in Firefox the offsetHeight of a row may not match
   // it is actual rendered height due to sub-pixel rounding errors. To ensure
   // the rows heights on both sides of the grid are the same, we have to set
   // them both.
   row.setHeight(isCollapsed ? rowHeight : '');
   row = Ext.fly(view.getNode(rowIdx), '_rowExpander');
   row.setHeight(isCollapsed ? rowHeight : '');
   row[addOrRemoveCls](me.rowCollapsedCls);
   view.refreshSize();
  } else {
   fireView = view;
  }
//通过grid触发事件,而不是view
this.grid.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
//下面为ext论坛的解决办法,无效
//fireView.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
  // Coalesce laying out due to view size changes
  Ext.resumeLayouts(true);
 },
});
//Ext.loader.setConfig({enabled:true});
Ext.onReady(function() {
 Ext.QuickTips.init();
 var store = new Ext.data.Store({
   
  fields:[
   {name:'fileName',type:'string'},
   {name:'room',type:'string'},
   {name:'recordDate',type:'string'},
   
  ],
  data:[
   {fileName:'文件1',room:'会议室1',recordDate:'2014-07-03'},
   {fileName:'文件2',room:'会议室2',recordDate:'2014-07-03'},
   {fileName:'文件3',room:'会议室3',recordDate:'2014-07-03'}
  ],
  autoLoad:true
 });
 var expander = new Ext.grid.plugin.RowExpander({
  rowBodyTpl:new Ext.XTemplate('<div class="detailData">pp</div>'),
  listeners:{
   expandbody:function(){//无法触发这个是事件
    console.log('Ext.grid.plugin.RowExpander');
   }
  }
 });
  Ext.create('Ext.grid.Panel',{
  xtype: 'row-expander-grid',
  store: store,
  listeners:{
   expandbody:function(){//OK,可以触发
    console.log('fired from grid');
   }
  },
  renderTo:Ext.getBody(),
  columns: [
   {text: "文件名称", flex: 1, dataIndex: 'fileName'},
   {text: "会议室", dataIndex: 'room'},
   {text: "录制日期", renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'recordDate'}
  ],
  width: 600,
  height: 300,
  plugins:expander,
  collapsible: true,
  animCollapse: false,
  title: 'Expander Rows in a Collapsible Grid',
  iconCls: 'icon-grid'
 });
});
</script>
</head>
<body id="docbody">
</body>
</html>

Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

Javascript 相关文章推荐
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 #Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 #Javascript
js创建表单元素并使用submit进行提交
Aug 14 #Javascript
使用typeof判断function是否存在于上下文
Aug 14 #Javascript
java、javascript实现附件下载示例
Aug 14 #Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 #Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 #Javascript
You might like
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Python中的is和id用法分析
2015/01/26 Python
django批量导入xml数据
2016/10/16 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
python实现烟花小程序
2019/01/30 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
企业授权委托书范本
2014/04/02 职场文书
2014年大学生工作总结
2014/11/20 职场文书
士兵突击观后感
2015/06/16 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python