javascript - Ext JS 选项卡面板不适合窗口大小

Question

有人希望在 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'
        },

非常感谢任何建议。

Answer 1

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

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