ExtJs TabPanel滚动条行为，如果选项卡项大于制表符大小

Question

我需要使这个简单的例子来理解TabPanel的行为。 我已经阅读了大量线程的它，答案往往是 -make的项目（在这个例子中电网）一个tabpanel 或固定填写标签的整个空间 -set网格大小的直接孩子

BUT 我的目标是获得大小大于标签大小的标签的项目，所以该标签必须具有滚动条 我无法直接设置项目（网格）tabpanel的子项，因为tabpanel布局修复了标签的大小你不能有滚动条

此代码构建tabpanel：

var vp = new Ext.Viewport({ 

    layout: 'border', 
    id: 'view1', 
    items: [{ 
     xtype: 'panel', 
     region: 'north', 
     title: 'north' 
    }, { 
     xtype: 'panel', 
     region: 'east', 
     title: 'east' 
    }, { 
     xtype: 'panel', 
     region: 'center', 
     title: 'center', 
     items: [{ 
      xtype: 'tabpanel', 
      title: 'Tabpanel', 
      id: 'tabpanel', 
      activeTab: 'tab', 
      autoWidth: false, 
      autoHeight: false, 
      defaults: { 
       autoScroll: true 
      }, 
      items: [{ 
       xtype: 'panel', 
       title: 'grid', 
       id: 'tab', 
       autoWidth: false, 
       autoHeight: false, 
       defaults: { 
        autoScroll: true 
       }, 

       items: grid 
      }] 
     }] 
    }, { 
     xtype: 'panel', 
     region: 'west', 
     title: 'west' 
    } 

    ] 
}); 
vp.show(); 

alert("tabpanel: " + Ext.getCmp('tabpanel').getWidth() + "\ngrid: " + Ext.getCmp('grid').getWidth()); 

而这个代码建立网格（从ext的例子取）

var myData = [ 
    ['3m Co',        71.72, 0.02, 0.03, '9/1 12:00am'], 
    ['Alcoa Inc',       29.01, 0.42, 1.47, '9/1 12:00am'], 
    ['Altria Group Inc',     83.81, 0.28, 0.34, '9/1 12:00am'], 
    ['American Express Company',   52.55, 0.01, 0.02, '9/1 12:00am'], 
    ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'], 
    ['AT&T Inc.',       31.61, -0.48, -1.54, '9/1 12:00am'], 
    ['Boeing Co.',       75.43, 0.53, 0.71, '9/1 12:00am'], 
    ['Caterpillar Inc.',     67.27, 0.92, 1.39, '9/1 12:00am'], 
    ['Citigroup, Inc.',      49.37, 0.02, 0.04, '9/1 12:00am'], 
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'], 
    ['Exxon Mobil Corp',     68.1, -0.43, -0.64, '9/1 12:00am'], 
    ['General Electric Company',   34.14, -0.08, -0.23, '9/1 12:00am'], 
    ['General Motors Corporation',   30.27, 1.09, 3.74, '9/1 12:00am'], 
    ['Hewlett-Packard Co.',     36.53, -0.03, -0.08, '9/1 12:00am'], 
    ['Honeywell Intl Inc',     38.77, 0.05, 0.13, '9/1 12:00am'], 
    ['Intel Corporation',     19.88, 0.31, 1.58, '9/1 12:00am'], 
    ['International Business Machines',  81.41, 0.44, 0.54, '9/1 12:00am'], 
    ['Johnson & Johnson',     64.72, 0.06, 0.09, '9/1 12:00am'], 
    ['JP Morgan & Chase & Co',    45.73, 0.07, 0.15, '9/1 12:00am'], 
    ['McDonald\'s Corporation',    36.76, 0.86, 2.40, '9/1 12:00am'], 
    ['Merck & Co., Inc.',     40.96, 0.41, 1.01, '9/1 12:00am'], 
    ['Microsoft Corporation',    25.84, 0.14, 0.54, '9/1 12:00am'], 
    ['Pfizer Inc',       27.96, 0.4, 1.45, '9/1 12:00am'], 
    ['The Coca-Cola Company',    45.07, 0.26, 0.58, '9/1 12:00am'], 
    ['The Home Depot, Inc.',    34.64, 0.35, 1.02, '9/1 12:00am'], 
    ['The Procter & Gamble Company',  61.91, 0.01, 0.02, '9/1 12:00am'], 
    ['United Technologies Corporation',  63.26, 0.55, 0.88, '9/1 12:00am'], 
    ['Verizon Communications',    35.57, 0.39, 1.11, '9/1 12:00am'],    
    ['Wal-Mart Stores, Inc.',    45.45, 0.73, 1.63, '9/1 12:00am'] 
]; 
    function change(val) { 
    if (val > 0) { 
     return '<span style="color:green;">' + val + '</span>'; 
    } else if (val < 0) { 
     return '<span style="color:red;">' + val + '</span>'; 
    } 
    return val; 
} 

function pctChange(val) { 
    if (val > 0) { 
     return '<span style="color:green;">' + val + '%</span>'; 
    } else if (val < 0) { 
     return '<span style="color:red;">' + val + '%</span>'; 
    } 
    return val; 
} 
var store = new Ext.data.ArrayStore({ 
    fields: [ 
     {name: 'company'}, 
     {name: 'price',  type: 'float'}, 
     {name: 'change',  type: 'float'}, 
     {name: 'pctChange', type: 'float'}, 
     {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 
    ] 
}); 

store.loadData(myData); 

// create the Grid 
var grid = new Ext.grid.GridPanel({ 
    store: store, 
    columns: [ 
     { 
      id  :'company', 
      header : 'Company', 
      width : 500, 
      sortable : true, 
      dataIndex: 'company' 
     }, 
     { 
      header : 'Price', 
      width : 75, 
      sortable : true, 
      renderer : 'usMoney', 
      dataIndex: 'price' 
     }, 
     { 
      header : 'Change', 
      width : 75, 
      sortable : true, 
      dataIndex: 'change' 
     }, 
     { 
      header : '% Change', 
      width : 75, 
      sortable : true, 
      dataIndex: 'pctChange' 
     }, 
     { 
      header : 'Last Updated', 
      width : 300, 
      sortable : true, 
      dataIndex: 'lastChange' 
     }, 

    ], 
    stripeRows: true, 
    autoExpandColumn: 'company', 
    height: 1000, 
    width: 2000, 
    title: 'Array Grid', 
    id:'grid', 
    // config options for stateful behavior 
    stateful: true, 
    autoscroll:true, 
    stateId: 'grid' 
}); 

警报结果是

tabpanel: 1297 
grid: 2000 

但没有滚动条将出现

Answer 1

的的TabPanel没有从接收高度它的周围布局由于它的放置方式。

一种选择是中心区域面板设置一个合适的布局：

{ 
    xtype: 'panel', 
    region: 'east', 
    title: 'east' 
}, 
{ 
    xtype: 'panel', 
    region: 'center', 
    title: 'center', 
    layout: 'fit', 
    items: { 
     xtype: 'tabpanel', 
     title: 'Tabpanel' 
     // ... 
    } 
}, 
{ 
    xtype: 'panel', 
    region: 'west', 
    title: 'west' 
} 

但是，除非你打算做更多的东西不仅仅是举办的TabPanel中心区域你最好只使一个tabpanel中心区域：

{ 
    xtype: 'panel', 
    region: 'east', 
    title: 'east'  
}, 
{ 
    xtype: 'tabpanel', 
    region: 'center', 
    title: 'Tabpanel' 
    // ... 
}, 
{ 
    xtype: 'panel', 
    region: 'west', 
    title: 'west' 
} 

而且，你不需要设置在GridPanel中或上的TabPanel的默认设置AutoScroll属性，你可以在事实上这样做会导致一些不良的渲染。