Ext TabPanel items高度宽度自适应

 

写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:'发票信息'
      }]
    }]
  })
})