body
{
font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif;
font-size: 10.5pt;
line-height: 1.5;
}
html, body
{
}
h1 {
font-size:1.5em;
font-weight:bold;
}
h2 {
font-size:1.4em;
font-weight:bold;
}
h3 {
font-size:1.3em;
font-weight:bold;
}
h4 {
font-size:1.2em;
font-weight:bold;
}
h5 {
font-size:1.1em;
font-weight:bold;
}
h6 {
font-size:1.0em;
font-weight:bold;
}
img {
border:0;
max-width: 100%;
height: auto !important;
}
blockquote {
margin-top:0px;
margin-bottom:0px;
}
table {
border-collapse:collapse;
border:1px solid #bbbbbb;
}
td {
border-collapse:collapse;
border:1px solid #bbbbbb;
}
Extjs4---Cannot read property 'addCls' of null - heirenheiren的专栏 - 博客频道 - ****.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去创建出来。
出错误代码：
- 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',
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);
- }
- });
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
错误。