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

做后台管理系统时遇到的问题，关于tab关闭后再打开不显示，或者报错

我在新的tabpanel中加入了一个grid，当我关闭再次打开就会报错Cannot read property 'addCls' of null，

原因是我在定义grid的错误

这是错误代码：

[javascript]  view plain copy

1. Ext.define('HT.view.Grid',{  
2.     extend:'Ext.grid.Panel',  
3.   
4.     title : '人员列表',  
5.     width:400,  
6.     height:170,  
7.     frame:true,  
8.     store: {  
9.         fields: ['id','name','sex','age','birthday'],  
10.         proxy: {  
11.             type: 'ajax',  
12.             url : 'users',  
13.             reader: {  
14.                 type: 'json',//Ext.data.reader.Json解析器  
15.                 root: 'users'  
16.             }  
17.         },  
18.         autoLoad: true  
19.     },  
20.     columns: [//配置表格列  
21.         new Ext.grid.RowNumberer(),//表格行号组件  
22.         {header: "编号", width: 80, dataIndex: 'id', sortable: true},  
23.         {header: "姓名", width: 80, dataIndex: 'name', sortable: true},  
24.         {header: "年龄", width: 80, dataIndex: 'age', sortable: true},  
25.         {header: "性别", width: 80, dataIndex: 'sex', sortable: true},  
26.         {header: "生日", width: 80, dataIndex: 'birthdate', sortable: true}  
27.     ]  
28.   
29. });  

应该改为这个：

[javascript]  view plain copy

1. Ext.define('HT.view.Grid',{  
2.     extend:'Ext.grid.Panel',  
3.     title : '人员列表',  
4.       
5.     initComponent:function(){  
6.         Ext.apply(this,{  
7.             width:400,  
8.             height:170,  
9.             frame:true,  
10.             store: {  
11.                 fields: ['id','name','sex','age','birthday'],  
12.                 proxy: {  
13.                     type: 'ajax',  
14.                     url : 'users',  
15.                     reader: {  
16.                         type: 'json',//Ext.data.reader.Json解析器  
17.                         root: 'users'  
18.                     }  
19.                 },  
20.                 autoLoad: true  
21.             },  
22.             columns: [//配置表格列  
23.                 new Ext.grid.RowNumberer(),//表格行号组件  
24.                 {header: "编号", width: 80, dataIndex: 'id', sortable: true},  
25.                 {header: "姓名", width: 80, dataIndex: 'name', sortable: true},  
26.                 {header: "年龄", width: 80, dataIndex: 'age', sortable: true},  
27.                 {header: "性别", width: 80, dataIndex: 'sex', sortable: true},  
28.                 {header: "生日", width: 80, dataIndex: 'birthdate', sortable: true}  
29.             ]  
30.         }),  
31.         this.callParent(arguments);  
32.     }  
33.   
34. });  

看样子属性的设置都要用apply方法设置进去

http://www.jishu521.com/post/menogxinjinglong/8110408.html

=================================================================================================

之前的理解肤浅

Cannot read property 'addCls' of null 

一般出现在这种场景下

create a window ,window的 Ext.define 时的 items 你写的是 Ext.create出来的某个组件，而不是{xtype:'xxx'}这种形式

当window关闭时，它会把把自己内部包含的组件也destroy掉，这样你第二次 create 这个window的时候 内部 引用的那个组件已经被销毁了，就错误产生了。

但是你如果是{xtype:'xxx'}这种形式的话 那么 每一次 create 都会重新创建内部组件。

所以 建议是 内部 items 里 保持{xtype:'xxx'}形式定义子组件