ExtJS 多Tab页面切换抛异常 Cannot read property 'tagName' of null

系统问题表现:某一指定页面与其他任何页面组合来回切换,会发生异常,并导致无法打开新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);
		}
	}
});
原文地址:https://www.cnblogs.com/chonghaojie/p/11387927.html