Extjs4---Cannot read property 'addCls' of null
做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCls' of null,原因是我在定义grid的错误的时候这是错误代码:[javascript] viewplaincopy
用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 错误。
更多推荐
所有评论(0)