折りたたまれたパネルに 3 つのグラフがあり、(時々!) このパネルを展開すると、最初のグラフの軸の DOM 構成が見つからないという非常に苛立たしい問題があります。残りのチャートは適切にレンダリングされます。
残念ながら、このバグを一貫して再現することはできません (これは、さまざまなレイアウト時間に関係していると思いますか?)。私が持っているのは、収集できるすべてのデバッグ情報です。
誰かがこれをデバッグすることに興味がありますか? これは私の最初の extjs/javascript プロジェクトであり、正直に言うと私の知識を超えています。追加情報が役立つ場合は、お気軽にお問い合わせください。
編集:ここで提案されているのは、コンポーネント自体のコードです。折りたたまれた状態のメイン ビューから呼び出されます。このコンポーネントが展開されると、エラーが発生します。
Ext.define("NewApp.view.stationView.stationView",{
extend: "Ext.panel.Panel",
alias: 'widget.stationView',
requires: [
"NewApp.view.stationView.stationViewController"
],
controller: "stationview-stationview",
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items:[{
xtype: 'cartesian',
reference: 'AverageDuration',
insetPadding: 10,
plugins: {
ptype: 'chartitemevents'
},
axes: [{
type: 'numeric',
position: 'left',
renderer: 'secondsToTimeAxis',
grid: true
},{
type: 'category',
position: 'bottom'
}],
series: [{
type: 'bar',
xField: 'Name',
yField: 'Average',
label: {
field: 'Average',
display: 'insideEnd',
orientation: 'horizontal',
renderer: 'secondsToTimeLabel'
}
},{
type: 'bar',
xField: 'Name',
yField: 'Estimate',
animation: {
duration: 0
},
renderer: 'EstimateRenderer'
}],
listeners: {
itemclick: 'changeStore'
},
flex: 1
},{
xtype: 'cartesian',
reference: 'Boxplot',
insetPadding: 10,
axes: [{
type: 'numeric',
position: 'left',
title: 'Frequency'
},{
type: 'category',
position: 'bottom',
renderer: 'secondsToTimeAxis',
title: 'Duration'
}],
series: {
type: 'bar',
colors: ['rgb(52,73,94)'],
xField: 'binStart',
yField: 'binCount'
},
flex: 1
}]
},{
xtype: 'cartesian',
reference: 'ControlChart',
insetPadding: 10,
height: '100%',
axes: [{
type: 'numeric',
position: 'left',
renderer: 'secondsToTimeAxis',
grid: true
},{
type: 'category',
position: 'bottom',
title: 'Main ID'
}],
series: {
type: 'line',
colors: ['rgb(52,151,219)'],
xField: 'JointID',
yField: 'Duration',
marker: {
radius: 4
},
tooltip: {
trackMouse: true,
showDelay: 0,
dismissDelay: 0,
hideDelay: 0,
renderer: 'ControlChartTooltip'
}
},
flex: 1
}],
listeners: {
stationClicked: 'stationClicked'
}
});
このコンポーネントは、次のようにメイン ビューから呼び出されます。
{
xtype: 'stationView',
flex: 6,
bodyPadding: 10,
id: 'stationView',
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: 'bottom',
listeners: {
expand: function() {
Ext.getCmp('firingLineViewExpanded').hide()
Ext.getCmp('firingLineView').show()
},
collapse: function() {
Ext.getCmp('firingLineView').hide()
Ext.getCmp('firingLineViewExpanded').show()
}
}
}