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,
            width:'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,
            width:'50%',
            layout: 'fit',
            id: 'lineChart1'
        }]
    }],
    listeners: {
        boxready: function () {
            //在元素lineChart0，lineChart1上渲染echarts图表
            viewport.ProductContrastChartsController.renderData(val);
        }
    }
});

转载于:https://www.cnblogs.com/chonghaojie/p/11387927.html