Ext JS 选项卡面板不适合窗口大小答案

【问题标题】：Ext JS tabpanel won't fit window sizeExt JS 选项卡面板不适合窗口大小
【发布时间】：2013-02-27 22:03:30
【问题描述】：

有人希望在 Ext JS 中完成一个面板以动态适应窗口大小。我不熟悉 Ext，但经过数小时的搜索，我还没有找到可行的解决方案。以下是预计要修复的代码：

var histotab = Ext.createWidget('tabpanel', { 
         activeTab: 0,
     width : 2000,
     height : "50%",
     defaults :{
         bodyPadding: 10
     },
    items: [
        {
           id: 'chartCmp',
           title: 'By Year',
           xtype: 'chart',
           style: 'background:#fff',
           layout:'fit',
           animate: true,
       shadow: true,
           store:SOD.storeHistogram,
           axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['countoffiles'],
        label: {
            font: '8px Arial'
        },

非常感谢任何建议。

【问题讨论】：

标签： javascript dynamic extjs panel tabpanel

【解决方案1】：

使用具有合适布局的 Ext.container.Viewport 类。视口始终根据文档视图大小调整自身大小。

Ext.widget('viewport', {
    layout: 'fit',
    items: {
        xtype: 'tabpanel',
        items: [{
            title: 'Foo',
            html: 'First tab'
        }]
    }
});

【讨论】：