用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去创建出来。
出错误代码:
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‘, 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
错误。
Extjs4---Cannot read property 'addCls' of null
时间: 2024-10-03 08:30:52