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

首先,API上很明确讲了:

我现在的做法:

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.

涉及到浏览器问题。

从lz的文章中产生了我的一个问题：

grid的列头是怎么换行的呢，比如这里的“时间”和“成功/失败/成功率”的换行显示。 我在header里用 "\n" 没有效果。