zoukankan      html  css  js  c++  java
  • 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);
    		}
    	}
    });
    
  • 相关阅读:
    以证书的方式登录ssh
    JSPatch在MAC下的使用
    sqlite3使用备忘
    iOS模拟器录屏转gif神器
    UINavigationController + UIScrollView组合,视图尺寸的设置探秘(三)
    UINavigationController + UIScrollView组合,视图尺寸的设置探秘(二)
    UINavigationController + UIScrollView组合,视图尺寸的设置探秘(一)
    内容可循环重用的ScrollView
    关于Logger
    Git入门操作
  • 原文地址:https://www.cnblogs.com/chonghaojie/p/11387927.html
Copyright © 2011-2022 走看看