系统问题表现:某一指定页面与其他任何页面组合来回切换,会发生异常,并导致无法打开新tab页面。
浏览器F12问题表现:
Uncaught TypeError: Cannot read property 'tagName' of null
at E.beginLayoutCycle (ext-all-rtl.js:82036)
at E.resetLayout (ext-all-rtl.js:99800)
at E.invalidate (ext-all-rtl.js:99594)
at E.invalidate (ext-all-rtl.js:99587)
at E.invalidate (ext-all-rtl.js:99587)
at E.invalidate (ext-all-rtl.js:99587)
at E.flushInvalidates (ext-all-rtl.js:99495)
at E.run (ext-all-rtl.js:99805)
at Function.flushLayouts (ext-all-rtl.js:27744)
at Function.resumeLayouts (ext-all-rtl.js:27750)
beginLayoutCycle @ ext-all-rtl.js:82036
resetLayout @ ext-all-rtl.js:99800
invalidate @ ext-all-rtl.js:99594
invalidate @ ext-all-rtl.js:99587
invalidate @ ext-all-rtl.js:99587
invalidate @ ext-all-rtl.js:99587
flushInvalidates @ ext-all-rtl.js:99495
run @ ext-all-rtl.js:99805
flushLayouts @ ext-all-rtl.js:27744
resumeLayouts @ ext-all-rtl.js:27750
Ext.resumeLayouts @ ext-all-rtl.js:30018
setActiveTab @ ext-all-rtl.js:105910
doActivateTab @ ext-all-rtl.js:105793
onClick @ ext-all-rtl.js:105786
fire @ ext-all-rtl.js:8221
fire @ ext-all-rtl.js:13301
publish @ ext-all-rtl.js:13275
doDelegatedEvent @ ext-all-rtl.js:13322
onDelegatedEvent @ ext-all-rtl.js:13310
t @ ext-all-rtl.js:3236
问题原因分析:
注释掉渲染echarts图表的方法后,切换tab页面报错的问题没有出现。
在元素lineChart0上添加iframe,然后将echarts图表渲染到iframe中后,切换tab页面报错的问题解决。
根据以上猜测是不是元素lineChart0,lineChart1的类型是"panel"导致,遂将"panel"修改为"container",问题彻底解决。
页面布局核心代码:
var mainPanel = Ext.create('Ext.panel.Panel', {
padding: '5',
layout: {
type: 'border'
},
bodyStyle: 'border-width : 0 0 0 0 !important;background:#FFFFFF',
controller: controller,
items: [{
region: 'north',
layout: 'hbox',
xtype: 'container',
items: [{
region: 'center',
xtype: 'panel',
flex:1,
'50%',
height: (document.body.clientHeight - 120) * 0.5,
layout: 'fit',
id: 'lineChart0'
}, {
region: 'east',
flex:1,
xtype: 'panel',
height: (document.body.clientHeight - 120) * 0.5,
'50%',
layout: 'fit',
id: 'lineChart1'
}]
}],
listeners: {
boxready: function () {
//在元素lineChart0,lineChart1上渲染echarts图表
viewport.ProductContrastChartsController.renderData(val);
}
}
});