我需要通过这个简单的例子来理解TabPanel的行为。我已经阅读了很多关于它的帖子，并且答案通常是 - 将项目（此示例中的网格）直接用于tabpanel或-set网格大小的子项固定以填充选项卡的整个空间
但我的目标是获取尺寸大于标签尺寸的标签项目，因此标签必须有滚动条我无法直接设置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
但是没有滚动条出现
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属性，实际上您可能会通过这样做导致一些不合需要的渲染。