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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4012字，纯文字阅读大概需要6分钟。

内容图文

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无法触发事件解决办法 - 文章图片

内容总结

以上是互联网集市为您收集整理的Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法全部内容，希望文章能够帮你解决Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/361563.html

来源：【匿名】