Ext TabPanel items高度宽度自适应(转）

写Ext的时候经常会遇到一些莫名其妙，令人感到非常神奇的问题，甚至都没办法用语言去描述它，搞的人想请教一下百度或Google都不知道该去怎么问，简直能够令人发疯。
先来看张截图吧。

 

 

有没有注意到里面的GridPanel很难看？因为它被它外面的那个Panel给“压迫”了，它伸展不开，呵呵。接着看看当前的JS代码。

Ext.onReady(function(){
  var grid = new Ext.grid.GridPanel({
 
    columns: [
 
      {header: '商品编号'},
      {header: '商品名称'},
      {header: '商品单价'},
      {header: '订购数量'},
      {header: '合计'}
    ],
    store: new Ext.data.JsonStore({}),
    bbar: new Ext.PagingToolbar({})
  });
  var panel = new Ext.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修改成这样：

var grid = new Ext.grid.GridPanel({
 
   columns: [
 
     {header: '商品编号'},
     {header: '商品名称'},
     {header: '商品单价'},
     {header: '订购数量'},
     {header: '合计'}
   ],
   viewConfig: {
       forceFit: true
   },
   store: new Ext.data.JsonStore({}),
   bbar: new Ext.PagingToolbar({})
 });

它所在的Panel修改成这样：

{
  title: '商品明细',
  layout: 'fit',
  items: grid
}

清空缓存，刷新一下，晕了，还是没变。%>_<%
为什么还是不行呢？其实GridPanel已经占满它的父容器了，问题是它的父容器并没有占满其自身的父容器（就是TabPanel）。接着修改，设置panel的layout为border，令其顶部panel的region为north，而tabpanel的region则为center，这样就都填充满了。

 

Ext TabPanel

完整代码如下：

Ext.onReady(function(){
  var grid = new Ext.grid.GridPanel({
 
    columns: [
 
      {header: '商品编号'},
      {header: '商品名称'},
      {header: '商品单价'},
      {header: '订购数量'},
      {header: '合计'}
    ],
    viewConfig: {
        forceFit: true
    },
    store: new Ext.data.JsonStore({}),
    bbar: new Ext.PagingToolbar({})
  });
  var panel = new Ext.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: '发票信息'
      }]
    }]
  })
})

 

 

来源：http://www.ineeke.com/archives/ext-tabpanel-items-highly-adaptive-width/