个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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个事件即可.

测试源代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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无法触发事件解决办法的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： Mac下部署springBoot项目到Docker中(demo)
文章推荐： 王者荣耀月梦山河卷什么时候上线 王者荣耀月梦山河卷获取方法
文章推荐： 下一站江湖修为怎么刷 修为快速获取攻略
文章推荐： javascript中的__defineGetter__和__defineSetter__介绍
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com