写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:[{ regi��λ,��Ԫ����on:'north', autoHeight:true, contentEl:'topPanel' },{ region:'center', xtype:'tabpanel', activeTab:0, items:[{ title:'商品明细', layout:'fit', items:grid },{ title:'会员资料' },{ title:'收货人信息' },{ title:'寄件人信息' },{ title:'发票信息' }] }] })})