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

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


出错误代码：

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  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, 250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},  
  18.             {sortable:false, 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. });  
修改正确代码：

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  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, 250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},  
  21.                     {sortable:false, 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. });  


所以所有的属性的设置都要用apply方法设置进去，如果没有放到apply里面就会报：Uncaught TypeError: Cannot read property 'parentNode' of undefined 错误。





【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wang3680/p/c19547918b87a72ce64e7460768f0e79.html