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.

涉及到浏览器问题。

 

评论

7 楼 goodfifa08 2009-09-02  

呵呵，平时都没有注意到这些细节，谢谢提醒。

6 楼 atian25 2009-09-02  

这里是html...用<br/>...

5 楼 goodfifa08 2009-09-02  

<p> </p>
<p>从lz的文章中产生了我的一个问题：</p>
<p>grid的列头是怎么换行的呢，比如这里的“时间”和“成功/失败/成功率”的换行显示。 我在header里用 "\n" 没有效果。</p>
<p><img src="http://dl.iteye.com/upload/attachment/118305/8249f570-1392-3422-8ca6-f9b72baa71fa.jpg" alt="" width="1202" height="441"></p>

4 楼 fins 2009-08-25  

我还是习惯用anchor属性来解决这类问题

3 楼 sp42 2009-08-25  

谢谢指点迷津 很全面 呵呵
好像到3.0 api增加说明，以前都用fit来做自适应高度 呵呵

2 楼 atian25 2009-06-24  

ls的方式是指定一个div,这个在je也见过很多了.
不过我个人不喜欢render到一个div去.
我写的extjs都不会在html中写入特定的元素

1 楼 Seraph115 2009-06-24  

http://seraph115.iteye.com/blog/225157