在利用ExtJs经常会遇到窗口放大样式改变，出现多个重复元素对象，面板不随着窗口变化等诸多问题，接下来我们就来一起看看这都是什么原因造成的。

我查询了一些资料，现在就来总结下。一共有三个方面我们先来看图，

这是初始化的界面

出现错误的界面：

红圈表示的地方是出错的地方。

第一种情况：1.在界面中,如果一行有多个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

});

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

2.ExtJS3.0及以前版本

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

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

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

Js代码

//控制缩放的时候修改grid的高度

this.on('afterlayout',function(view,layout){

var height = this.gridPanel.getSize().height - 30;

for(var i=0;i

this.gridArr[i].grid.setHeight(height); //.doLayout()

}

},this);

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

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

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

涉及到浏览器问题。