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

作者: 萌萌萌小可爱
来源: 51数据库
2021-07-11

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=utf-8">
<title>ext4.2+ ext.grid.plugin.rowexpander无法触发collapsebody，expandbody事件解决办法</title>
<link rel="stylesheet" type="text/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>