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

body
{
font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif;
font-size: 10.5pt;
line-height: 1.5;
}
html, body
{

}
h1 {
font-size:1.5em;
font-weight:bold;
}
h2 {
font-size:1.4em;
font-weight:bold;
}
h3 {
font-size:1.3em;
font-weight:bold;
}
h4 {
font-size:1.2em;
font-weight:bold;
}
h5 {
font-size:1.1em;
font-weight:bold;
}
h6 {
font-size:1.0em;
font-weight:bold;
}
img {
border:0;
max-width: 100%;
height: auto !important;
}
blockquote {
margin-top:0px;
margin-bottom:0px;
}
table {
border-collapse:collapse;
border:1px solid #bbbbbb;
}
td {
border-collapse:collapse;
border:1px solid #bbbbbb;
}

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

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

出错误代码：

1. Ext.define('WEB.view.stage.slide.SlideGridView',  
2. {  
3.     extend:'Ext.grid.Panel',  
4.     alias:'widget.slideGridView',  
5.     stripeRows:true,  
6.     loadMask:true,  
7.     selType: 'checkboxmodel',  
8.     columnLines: true,  
9.     store: 'SlideStore',  
10.       
11.     columns:[  
12.             Ext.create('Ext.grid.RowNumberer', {  
13.                 text: '序号',  
14.                 width : 40,  
15.                 align:'center'  
16.             }),  
17.             {sortable:false, width:250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},  
18.             {sortable:false, width:250, align:'left',dataIndex:'desImgUrl',text:'描述图片'},  
19.             {sortable:false, flex:1,    align:'left',dataIndex:'slideHref',text:'滑动链接'},  
20.             
21.             {dataIndex:'slideId',text:'滑动ID',hidden:true},  
22.     ],  
23.       
24.     dockedItems: [{   
25.         xtype: 'pagingtoolbar',   
26.         store: 'SlideStore',   
27.         dock:"bottom",  
28.         enableOverflow:true,  
29.         displayInfo: true,  
30.         emptyMsg: '没有数据',  
31.         displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',    
32.         beforePageText: '第',    
33.         afterPageText: '页/共{0}页'   
34.     }]  
35. });  

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

修改正确代码：

1. Ext.define('WEB.view.stage.slide.SlideGridView',  
2. {  
3.     extend:'Ext.grid.Panel',  
4.     alias:'widget.slideGridView',  
5.       
6.     initComponent:function(){  
7.         Ext.apply(this,{  
8.             stripeRows:true,  
9.             loadMask:true,  
10.             selType: 'checkboxmodel',  
11.             columnLines: true,  
12.             store: 'SlideStore',  
13.               
14.             columns:[  
15.                     Ext.create('Ext.grid.RowNumberer', {  
16.                         text: '序号',  
17.                         width : 40,  
18.                         align:'center'  
19.                     }),  
20.                     {sortable:false, width:250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},  
21.                     {sortable:false, width:250, align:'left',dataIndex:'desImgUrl',text:'描述图片'},  
22.                     {sortable:false, flex:1,    align:'left',dataIndex:'slideHref',text:'滑动链接'},  
23.                     
24.                     {dataIndex:'slideId',text:'滑动ID',hidden:true},  
25.             ],  
26.               
27.             dockedItems: [{   
28.                 xtype: 'pagingtoolbar',   
29.                 store: 'SlideStore',   
30.                 dock:"bottom",  
31.                 enableOverflow:true,  
32.                 displayInfo: true,  
33.                 emptyMsg: '没有数据',  
34.                 displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',    
35.                 beforePageText: '第',    
36.                 afterPageText: '页/共{0}页'   
37.             }]  
38.         });    
39.         this.callParent(arguments);   
40.     }  
41. });  

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)