ExtJS Grid 自适应高度问题,老话题了...谈谈我的解决方法

首先,API上很明确讲了:

 

Ext.grid.GridPanel 写道

Notes:

1.Although this class inherits many configuration options from base classes, some of them (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will have no effect.
---autowidth和autoheight是没用的

2.A grid requires a width in which to scroll its columns, and a height in which to scroll its rows. These dimensions can either be set explicitly through the height and width configuration options or implicitly set by using the grid as a child item of a Container which will have a layout manager provide the sizing of its child items (for example the Container of the Grid may specify layout:'fit').

 

我现在的做法:

 

1.在3.0RC2 中,如果一行有多个GRID,则使用Ext.layout.HBoxLayout,如下图和代码

 

相关代码:

var p = new Ext.Panel({
      title:'::业务成功率(近4个统计周期)::',
      region:'center',
      //新的布局方式
      layout:{
        type:'hbox',
        align : 'stretch',
        pack  : 'start'
      },
      defaults:{
        //子元素平均分配宽度
        flex:1
      },
      split:true,
      frame:true,
      //前面定义的一个Grid数组
      items:this.businessGridArr,
      tbar:toolbar
});

 

PS:如果几个Grid需要不同的宽度,则分布给他们设置flex,看源码即知,会把全部的flex总和后求百分比.

 

2.ExtJS3.0及以前版本

 

1)利用其他布局管理器,如把grid放到一个fit布局的panel中

 

2)设置一个高度,然后自己去维护它

如监听grid所在的panel的afterlayout事件,然后获取grid的ownct的高度,从而设置,但是要计算到工具条等占用的宽度。如下代码:

//控制缩放的时候修改grid的高度
this.on('afterlayout',function(view,layout){
  var height = this.gridPanel.getSize().height - 30;
  for(var i=0;i<this.gridArr.length;i++){
    this.gridArr[i].grid.setHeight(height); //.doLayout()
  }
},this);

 

PS:至于在border布局里面,有north,south,center三个panel, 中间的放置一个grid,

高度不会自适应,是因为border是先计算north和south,然后剩下的空间给center.

依稀记得在extjs论坛有人说过,这种情况下center里面的grid不能自适应宽度,是一个很难修复的bug.

涉及到浏览器问题。