Ext RowExpander双表头总结:
使用Ext RowExpander双表头出现的问题:
-
引起的原因,ext-all.css里有一段css布局引起:
table-layout:fixed;
-
解决办法:
Ext的demo在定义expander对象的写法:
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<div class="childGrid">',
'',
'</div>'
),
expandOnEnter : true
});
下面是我自己的写法,在定义div的时候,外面包了一个table:
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<table id="childTable"><tr><td><div class="childGrid">',
'',
'</div></td></tr></table>'
),
expandOnEnter : true
});
然后再页面上在加一段css,如下:
<style type="text/css">
#childTable table{
table-layout : auto;
}
</style>
在刷新页面,子表格分页工具栏正常了,如下图:
-
子表格选中,父表格也会随着选中,但是实际当中我们是不希望这种情况出现的,解决办法如下:
//阻断子表格传递事件给父表格
childGrid.grid.afterMethod("processEvent",function(n,e){
e.stopPropagation();
});