ExtJS高度自适应

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.
涉及到浏览器问题。