extjs 4.1 サンドボックス チャートを使用する extjs 3.4 アプリケーションがあります。私が持っている唯一の問題は、IE8 では、タブパネル レイアウトからアクティブ化されたとき、またはカード レイアウトから呼び出されたときに、完全にレンダリングされないことです。
コードについて特別なことは何もありません:
var barBreakdownChart = Ext4.create('Ext4.chart.Chart', {
renderTo: Ext.get('barBreakdownDiv').dom,
width: 550,
height: 300,
animate: true,
store: geosPeerChartStore,
legend: true,
axes: [{
type: 'Numeric',
position: 'left',
title: 'Days of Supply',
fields: ['line1', 'line2', 'line3', 'line4', 'line5'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
labelTitle: {
font: '14px "Lucida Grande"'
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
// label: {
// rotate: {
// degrees: 315
// }
// },
fields: ['name']
}],
series: [{
type: 'column',
fill: true,
//title: 'Current Year',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('line1') + ' $');
}
},
xField: 'name',
yField: ['line1', 'line2', 'line3', 'line4', 'line5']
,title: ['2008', '2009', '2010', '2011', '2012']
}]
});
次に、タブパネル内でチャートが呼び出される場所を次に示します。
items: [{
xtype: 'tabpanel',
style: 'margin-bottom: 10px;',
height: 400,
deferredRender: false,
defaults: {
hideMode: 'offsets'
},
activeTab: 0,
items: [{
title: 'Line Chart',
items: lineBreakdownContainer
}, {
xtype:'panel',
html: '<div id="barBreakdownDiv"> </div>'
}]