写Ext的时候经常会遇到一些莫名其妙，令人感到非常神奇的问题，甚至都没办法用语言去描述它，搞的人想请教一下百度或Google都不知道该去怎么问，简直能够令人发疯。
先来看张截图吧。
有没有注意到里面的GridPanel很难看？因为它被它外面的那个Panel给“压迫”了，它伸展不开，呵呵。接着看看当前的JS代码。
Ext.onReady(function(){
vargrid=newExt.grid.GridPanel({
columns:[
{header:'商品编号'},
{header:'商品名称'},
{header:'商品单价'},
{header:'订购数量'},
{header:'合计'}
],
store:newExt.data.JsonStore({}),
bbar:newExt.PagingToolbar({})
});
varpanel=newExt.Panel({
items:[{
autoHeight:true,
contentEl:'topPanel'
},{
xtype:'tabpanel',
activeTab:0,
items:[{
title:'商品明细',
items:grid
},{
title:'会员资料'
},{
title:'收货人信息'
},{
title:'寄件人信息'
},{
title:'发票信息'
}]
}]
})
})
怎么改呢？如果我为GridPanel的高度宽度设置一个死值问题肯定是可以解决的，但是这样无法适应不同的分辨率及浏览器的大小。这是autoHeight为true没用，在它的bodyStyle中设置高度为100%也同样没用。GridPanel有一个viewConfig配置选项，如果它的父容器（商品明细）的layout为fit，那么可以通过设置viewConfig的forceFit为true使它占满父容器。
GridPanel修改成这样：
vargrid=newExt.grid.GridPanel({
columns:[
{header:'商品编号'},
{header:'商品名称'},
{header:'商品单价'},
{header:'订购数量'},
{header:'合计'}
],
viewConfig:{
forceFit:true
},
store:newExt.data.JsonStore({}),
bbar:newExt.PagingToolbar({})
});
它所在的Panel修改成这样：
{
title:'商品明细',
layout:'fit',
items:grid
}
清空缓存，刷新一下，晕了，还是没变。%>_<%
为什么还是不行呢？其实GridPanel已经占满它的父容器了，问题是它的父容器并没有占满其自身的父容器（就是TabPanel）。接着修改，设置panel的layout为border，令其顶部panel的region为north，而tabpanel的region则为center，这样就都填充满了。
Ext TabPanel
完整代码如下：
Ext.onReady(function(){
vargrid=newExt.grid.GridPanel({
columns:[
{header:'商品编号'},
{header:'商品名称'},
{header:'商品单价'},
{header:'订购数量'},
{header:'合计'}
],
viewConfig:{
forceFit:true
},
store:newExt.data.JsonStore({}),
bbar:newExt.PagingToolbar({})
});
varpanel=newExt.Panel({
layout:'border',
items:[{
region:'north',
autoHeight:true,
contentEl:'topPanel'
},{
region:'center',
xtype:'tabpanel',
activeTab:0,
items:[{
title:'商品明细',
layout:'fit',
items:grid
},{
title:'会员资料'
},{
title:'收货人信息'
},{
title:'寄件人信息'
},{
title:'发票信息'
}]
}]
})
})