Ext Rowexpander分页样式错乱的解决办法

Ext RowExpander双表头总结：

使用Ext RowExpander双表头出现的问题：

 

1. 引起的原因，ext-all.css里有一段css布局引起：

   table-layout:fixed;

    

2. 解决办法：

   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>

在刷新页面，子表格分页工具栏正常了，如下图：

 

 

1. 子表格选中，父表格也会随着选中，但是实际当中我们是不希望这种情况出现的，解决办法如下：

//阻断子表格传递事件给父表格

     childGrid.grid.afterMethod("processEvent",function(n,e){

         e.stopPropagation();

});