Extjs4---Cannot read property 'addCls' of null

用Extjs4 MVC做后台管理系统时,通过点击左边导航菜单往tabpanel加入tab,然后关闭再打开某个tab,结果tabpanel不能显示tab,系统页面处于崩溃状态。而且浏览器报错Cannot
read property ‘addCls‘ of null。

经分析查阅网上资料得知,原因是:定义grid的时候加入序号这行代码:new Ext.grid.RowNumberer()引起的。

假设没有这样代码,系统执行正常。

当用Extjs创建(create)一个window。panel时。或者就是new一个RowNumberer这种组件,当window关闭时,它会把自己内部包括的组件也destroy掉。这样你第二次
create 这个window的时候,内部引用的那个组件已经被销毁了,就错误产生了。

但假设是通过{xtype:‘xxx‘}这样的形式获得组件,那么每一次 create 都会又一次创建内部组件,就不会产生错误。

所以建议是内部 items 里保持{xtype:‘xxx‘}形式定义子组件。可是这个gird序号功能临时没有{xtype:‘xxx‘}这样的方式获取组件,仅仅能是通过create去创建出来。

出错误代码:

Ext.define(‘WEB.view.stage.slide.SlideGridView‘,
{
	extend:‘Ext.grid.Panel‘,
	alias:‘widget.slideGridView‘,
	stripeRows:true,
    loadMask:true,
    selType: ‘checkboxmodel‘,
	columnLines: true,
    store: ‘SlideStore‘,

    columns:[
			Ext.create(‘Ext.grid.RowNumberer‘, {
				text: ‘序号‘,
				width : 40,
				align:‘center‘
			}),
			{sortable:false, width:250, align:‘left‘,dataIndex:‘bgImgUrl‘,text:‘背景图片‘},
			{sortable:false, width:250, align:‘left‘,dataIndex:‘desImgUrl‘,text:‘描写叙述图片‘},
			{sortable:false, flex:1,    align:‘left‘,dataIndex:‘slideHref‘,text:‘滑动链接‘},

			{dataIndex:‘slideId‘,text:‘滑动ID‘,hidden:true},
	],

	dockedItems: [{
	    xtype: ‘pagingtoolbar‘,
	    store: ‘SlideStore‘,
	    dock:"bottom",
	    enableOverflow:true,
	    displayInfo: true,
	    emptyMsg: ‘没有数据‘,
	    displayMsg: ‘当前显示{0}-{1}条记录 / 共{2}条记录 ‘,
	    beforePageText: ‘第‘,
	    afterPageText: ‘页/共{0}页‘
	}]
});

改动正确代码:

Ext.define(‘WEB.view.stage.slide.SlideGridView‘,
{
	extend:‘Ext.grid.Panel‘,
	alias:‘widget.slideGridView‘,

	initComponent:function(){
		Ext.apply(this,{
			stripeRows:true,
		    loadMask:true,
		    selType: ‘checkboxmodel‘,
			columnLines: true,
		    store: ‘SlideStore‘,

		    columns:[
					Ext.create(‘Ext.grid.RowNumberer‘, {
						text: ‘序号‘,
						width : 40,
						align:‘center‘
					}),
					{sortable:false, width:250, align:‘left‘,dataIndex:‘bgImgUrl‘,text:‘背景图片‘},
					{sortable:false, width:250, align:‘left‘,dataIndex:‘desImgUrl‘,text:‘描写叙述图片‘},
					{sortable:false, flex:1,    align:‘left‘,dataIndex:‘slideHref‘,text:‘滑动链接‘},

					{dataIndex:‘slideId‘,text:‘滑动ID‘,hidden:true},
			],

			dockedItems: [{
			    xtype: ‘pagingtoolbar‘,
			    store: ‘SlideStore‘,
			    dock:"bottom",
			    enableOverflow:true,
			    displayInfo: true,
			    emptyMsg: ‘没有数据‘,
			    displayMsg: ‘当前显示{0}-{1}条记录 / 共{2}条记录 ‘,
			    beforePageText: ‘第‘,
			    afterPageText: ‘页/共{0}页‘
			}]
		});
        this.callParent(arguments);
	}
});

所以全部的属性的设置都要用apply方法设置进去,假设没有放到apply里面就会报:Uncaught TypeError: Cannot read property ‘parentNode‘ of undefined
错误。

Extjs4---Cannot read property 'addCls' of null

时间: 2024-10-03 08:30:52

Extjs4---Cannot read property 'addCls' of null的相关文章

Extjs4---Cannot read property 'addCls' of null

用Extjs4 MVC做后台管理系统时,通过点击左边导航菜单往tabpanel添加tab,然后关闭再打开某个tab,结果tabpanel不能显示tab,系统页面处于崩溃状态,并且浏览器报错Cannot read property 'addCls' of null. 经分析查阅网上资料得知,原因是:定义grid的时候添加序号这行代码:new Ext.grid.RowNumberer()引起的.如果没有这样代码,系统运行正常. 当用Extjs创建(create)一个window,panel时,或者就

百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑器,为开发者提供了诸多便利,你甚至可以用它来把word文档的内容按照一定的格式转换成html代码,然后再放进自己的项目中. 1.我们的项目中,用户在注册时有可能需要查看用户协议和隐私协议,而我们的文案是将这两个协议的内容放在word文档中,作为苦逼的开发人员,你需要把这些文字展示在html页面上,并

Cannot set property 'onclick' of null的问题

转载自: https://my.oschina.net/ximidao/blog/351017 摘要: 测试点击事件的时候浏览器报错,提示Uncaught TypeError: Cannot set property 'onclick' of null 今天看了一个W3School JS点击事件的测试案例,详情页:http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onclick4,其代码为: <!DOCTYPE html><html&

Cannot set property ‘onclick‘ of null的问题

今天看了一个W3School JS点击事件的测试案例,详情页:http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onclick4,其代码为: <!DOCTYPE html> <html> <head> </head> <body> <p>点击按钮就可以执行 <em>displayDate()</em> 函数.</p> <button id=

org.hibernate.PropertyValueException: not-null property references a null or transient value: model.

今天在写一个SSH整合的项目时,首先将数据库操作部分单独分离出来,写完后使用Junit进行测试,经过测试,发现没有任何问题,对数据库中的内容进行增删改查没有问题,但是将他整合到SSH的项目中时,报出了这么一个错误org.hibernate.PropertyValueException: not-null property references a null or transient value: model.TransactionRecord.remark.当时很是费解,因为当时当时在Junit

Uncaught TypeError: Cannot set property &#39;innerHTML&#39; of null

学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现在js中的一段代码没有执行到,报以下错误 Uncaught TypeError: Cannot set property 'innerHTML' of null  然后查询该错误原因,结果是因为js引用放在了页面的头部,在修改 innerHTML 属性时找不到该属性,因为需要修改一个html标签中的

Uncaught TypeError: Cannot read property &#39;ownerDocument&#39; of null

/********************************************************************* * Uncaught TypeError: Cannot read property 'ownerDocument' of null * 说明: * 尝试将SVG文件内容通过JS Ajax加载,然后动态插入div中,报这个错误, * 解决办法,直接将svg后缀改成html,就可以了. * * 2017-8-25 深圳 龙华樟坑村 曾剑锋 *********

vue报错 Uncaught TypeError: Cannot read property ‘children ’ of null

Uncaught TypeError: Cannot read property 'children ' of null ratings未渲染完毕,就跳走goods了,取消默认跳转,即可

报错之-Cannot set property &#39;onclick&#39; of null

当js文件放在head里面时,如果绑定了onclick或者onmouseover事件,就会出现如下图类似的错误,是因为浏览器的加载你写的html文档的顺序是从上往下,加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到onclick绑定的按钮节点,于是报错.解决办法有:第一,把js文件放在底部加载:第二,使用window.onload=function(){}包裹js内容. 报错之-Cannot set property 'onclick' of null

webapi使用swagger出现“Cannot read property &#39;parameters&#39; of null”

前端时间在webapi项目使用swagger来提供接口文档及测试工具,按网上方法(http://wmpratt.com/swagger-and-asp-net-web-api-part-1)配置好之后在浏览器控制台出现"Cannot read property 'parameters' of null"错误. 后面发现问题出在//localhost:5645/swagger/docs/v1这个JSON资源上面,序列化出来的JSON,包含了为NULL的字段,导致swagger-ui-mi