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.

涉及到浏览器问题。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值