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

原创

大数据工匠 2022-11-29 12:43:34 ©著作权

©著作权归作者所有：来自51CTO博客作者大数据工匠的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

经分析查阅网上资料得知，原因是：定义grid的时候添加序号这行代码：new Ext.grid.RowNumberer()引起的。如果没有这样代码，系统运行正常。

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

但如果是通过{xtype:'xxx'}这种形式获得组件，那么每一次 create 都会重新创建内部组件，就不会产生错误。所以建议是内部 items 里保持{xtype:'xxx'}形式定义子组件，但是这个gird序号功能暂时没有{xtype:'xxx'}这种方式获取组件，只能是通过create去创建出来。

出错误代码：

Ext.define('WEB.view.stage.slide.SlideGridView',  
{  
'Ext.grid.Panel',  
'widget.slideGridView',  
true,  
true,  
'checkboxmodel',  
true,  
'SlideStore',  
      
    columns:[  
'Ext.grid.RowNumberer', {  
'序号',  
                width : 40,  
'center'  
            }),  
false, width:250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},  
false, width:250, align:'left',dataIndex:'desImgUrl',text:'描述图片'},  
false, flex:1,    align:'left',dataIndex:'slideHref',text:'滑动链接'},  
            
'slideId',text:'滑动ID',hidden:true},  
    ],  
      
    dockedItems: [{   
'pagingtoolbar',   
'SlideStore',   
"bottom",  
true,  
true,  
'没有数据',  
'当前显示{0}-{1}条记录 / 共{2}条记录 ',    
'第',    
'页/共{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}页' 
    }]
});

修改正确代码：



Ext.define('WEB.view.stage.slide.SlideGridView',  
{  
'Ext.grid.Panel',  
'widget.slideGridView',  
      
function(){  
this,{  
true,  
true,  
'checkboxmodel',  
true,  
'SlideStore',  
              
            columns:[  
'Ext.grid.RowNumberer', {  
'序号',  
                        width : 40,  
'center'  
                    }),  
false, width:250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},  
false, width:250, align:'left',dataIndex:'desImgUrl',text:'描述图片'},  
false, flex:1,    align:'left',dataIndex:'slideHref',text:'滑动链接'},  
                    
'slideId',text:'滑动ID',hidden:true},  
            ],  
              
            dockedItems: [{   
'pagingtoolbar',   
'SlideStore',   
"bottom",  
true,  
true,  
'没有数据',  
'当前显示{0}-{1}条记录 / 共{2}条记录 ',    
'第',    
'页/共{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); 
  }
});