我要评论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>
发表评论