如果Tab项目大于Tab大小，则ExtJs TabPanel滚动条行为
||
我需要做一个简单的例子，以了解TabPanel的行为。
我已经读了很多有关它的主题，答案通常是
-使项目（在此示例中为网格）直接成为tabpanel的子级
要么
固定的网格大小以填充选项卡的整个空间
但
我的目标是获取选项卡中大小大于选项卡大小的项目，因此选项卡必须具有滚动条
我无法直接将项目（网格）设置为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());
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
没有找到相关结果
已邀请:
1 个回复
篮肥炼皖
{ 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\' }{ xtype: \'panel\', region: \'east\', title: \'east\' }, { xtype: \'tabpanel\', region: \'center\', title: \'Tabpanel\' // ... }, { xtype: \'panel\', region: \'west\', title: \'west\' }