如果Tab项目大于Tab大小，则ExtJs TabPanel滚动条行为

如何解决如果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\'
    },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\',defaults: {
                    autoScroll: true
                },items: grid
            }]
        }]
    },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,[\'Altria Group Inc\',83.81,0.28,0.34,[\'American Express Company\',52.55,0.01,[\'American International Group,Inc.\',64.13,0.31,0.49,[\'AT&T Inc.\',31.61,-0.48,-1.54,[\'Boeing Co.\',75.43,0.53,0.71,[\'Caterpillar Inc.\',67.27,0.92,1.39,[\'Citigroup,49.37,0.04,[\'E.I. du Pont de Nemours and Company\',40.48,0.51,1.28,[\'Exxon Mobil Corp\',68.1,-0.43,-0.64,[\'General Electric Company\',34.14,-0.08,-0.23,[\'General Motors Corporation\',30.27,1.09,3.74,[\'Hewlett-Packard Co.\',36.53,-0.03,[\'honeywell Intl Inc\',38.77,0.05,0.13,[\'Intel Corporation\',19.88,1.58,[\'International Business Machines\',81.41,0.44,0.54,[\'Johnson & Johnson\',64.72,0.06,0.09,[\'JP Morgan & Chase & Co\',45.73,0.07,0.15,[\'McDonald\\\'s Corporation\',36.76,0.86,2.40,[\'Merck & Co.,40.96,0.41,1.01,[\'Microsoft Corporation\',25.84,0.14,[\'Pfizer Inc\',27.96,0.4,1.45,[\'The Coca-Cola Company\',45.07,0.26,0.58,[\'The Home Depot,34.64,0.35,1.02,[\'The Procter & Gamble Company\',61.91,[\'United Technologies Corporation\',63.26,0.55,0.88,[\'Verizon Communications\',35.57,0.39,1.11,[\'Wal-Mart Stores,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\',{name: \'pctChange\',{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,renderer : \'usMoney\',dataIndex: \'price\'
        },{
            header   : \'Change\',dataIndex: \'change\'
        },{
            header   : \'% Change\',dataIndex: \'pctChange\'
        },{
            header   : \'Last Updated\',width    : 300,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\'
        // ...
    }
},region: \'west\',title: \'west\'
}   

但是，除非您打算做一些事情，而不仅仅是在中心区域中托管TabPanel，否则最好将TabPanel设置为中心区域：

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

另外，您不需要在GridPanel或TabPanel的默认值上设置autoScroll属性，并且这样做实际上可能会导致某些不良显示。