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>