ExtJS多tab页面切换抛异常 Cannot read property 'tagName' of null
时间:2019-08-21
本文章向大家介绍ExtJS多tab页面切换抛异常 Cannot read property 'tagName' of null,主要包括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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【UI自动化-1】UI自动化环境搭建与简单示例
- 【UI自动化-2】UI自动化元素定位专题
- 【UI自动化-3】UI自动化元素操作专题
- maven的安装与使用
- 【Java多线程-1】线程概述与线程创建和使用
- 【Java多线程-2】Java线程池详解
- 【Java多线程-3】Future与FutureTask
- 【Java多线程-4】CompletionService详解
- 【Java多线程-5】 CompletableFuture详解
- 【Java多线程-6】synchronized同步锁
- 【Java多线程-7】阅尽Java千般锁
- 【SpringBoot注解-2】AOP相关注解详解
- 【SpringBoot注解-3】Bean注入相关注解
- 【SpringBoot注解-4】:@Target、@Retention、@Documented注解简介
- 【Linux系列-1】top命令详解