extjs6,展开chart组件以适应列

在我的extjs6项目中,在当前页面中,我有一个列布局。在第二栏我有一张图表。如何使图表在高度和宽度上填充该列?我所做的一切都不管用。

下面是我的视图,第1列有一些小组件,因此不需要展开内容。我试过“适合”身高“100%”,似乎没有什么能正常工作。另外,我在创建视图后填充图表。不确定这是否重要

Ext.define('xxx.view.historical.Historical', {
    extend: 'Ext.Panel',

    xtype: 'app-historical',
    controller: 'historicalController',
    itemId: 'historicalItemId',
    viewModel: 'historicalVM',

    requires: [
        'xxx.view.historical.HistoricalController',
        'xxx.util.GlobalVar',
        'Ext.chart.*'
    ],

    title: 'Historical',

    layout: 'fit',

    items: [{
        xtype: 'tabpanel',
        margin: 10,
        tabBar: {
            layout: {
                pack: 'left'
            },
            border: true
        },
        style: {
            'border-radius': '4px 4px 4px 4px',
            'box-shadow': '0 0 5px rgba(0, 0, 0, 0.3)'
        },
        defaults: {
            iconAlign: 'top',
            bodyPadding: 0
        },
        items: [{
            title: 'Profit By Instrument',
            autoScroll: true,
            layout: {
                type: 'column'
            },
            width: '100%',
            items: [{
                columnWidth: 0.20,
                items: [{
                    xtype: 'combobox',
                    fieldLabel: 'Account',
                    emptyText: 'Select Account',
                    editable: false,
                    margin: 5,
                    displayField: 'AcctNum',
                    valueField: 'AcctNum',
                    bind: {
                        store: '{myAccountSummaryStore}'
                    },
                    listeners: {
                        select: 'onComboboxSelect'
                    },
                    queryMode: "local"
                    //combobox to select account
                }, {
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Instruments',
                    defaultType: 'checkboxfield',
                    itemId: 'itemIdCheckboxContainer',
                    margin: 5,
                    //cls: 'my-class',
                    items: [{
                        boxLabel: 'Anchovies',
                        name: 'topping',
                        inputValue: '1',
                        id: 'checkbox1',
                        cls: 'ownClass'
                    }]
                }, {
                    xtype: 'button',
                    text: 'Select All'
                }, {
                    xtype: 'button',
                    text: 'Deselect All'
                }]
            }, {
                //COLUMN 2
                columnWidth: 0.80,
                items: [{
                    xtype: 'chart',
                    title: 'this is my title',
                    itemId: 'chartId',
                    margin: 5,
                    width: '100%',
                    height: '100%',
                    legend: {
                        docked: 'bottom'
                    },
                    axes: [{
                        type: 'numeric',
                        position: 'left',
                        fields: ['cumulativePl'],
                        title: 'Pl'
                    }, {
                        type: 'time',
                        position: 'bottom',
                        fields: ['filedate'],
                        title: 'Filedate',
                        //renderer: 'onAxisLabelRender',
                        label: {
                            rotate: {
                                degrees: -40
                            }
                        }
                    }]
                }]
            }]
        }, {
            title: 'Profit By Account',
            autoScroll: true,
            items: []
        }]
    }]
});