Ext JS tabpanel不适合窗口大小

Question

Someone wants a panel done in Ext JS to dynamically fit the window size. I'm not familiar with Ext, but after hours of searching, I haven't found a working solution. Here is the code that is expected to be fixed:

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'
        },

Any suggestions are greatly appreciated.

Answer 1

Use the Ext.container.Viewport class with a fit layout. The viewport always sizes itself to the document view size.

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