Extjs4---Cannot read property 'addCls' of null - heirenheiren的专栏 - 博客频道 - youkuaiyun.com

最新推荐文章于 2021-01-07 10:47:42 发布

weixin_34378045

最新推荐文章于 2021-01-07 10:47:42 发布

阅读量146

点赞数

文章标签： javascript 测试 ViewUI

本文探讨了使用Extjs4 MVC开发后台管理系统时遇到的问题：点击导航菜单添加tab后，再次打开同一tab导致tabpanel无法显示并出现错误。文章详细分析了问题原因在于使用Ext.create方式创建的组件未被正确管理生命周期，并提供了修正代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Extjs4---Cannot read property 'addCls' of null - heirenheiren的专栏 - 博客频道 - youkuaiyun.com

用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去创建出来。

出错误代码：

[javascript] view plain copy print ?

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',
	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}页' 
	}]
});

修改正确代码：

[javascript] view plain copy print ?

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);
}
});

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 错误。

来自为知笔记(Wiz)