在我的extjs6项目中，在当前页面中，我具有列布局。在第2栏中，我有一个图表。如何使图表在高度和宽度上填充该列？我尝试的所有方法都无法正常工作。
下面是我的观点，第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: []
}]
}]
});