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的专栏 - 博客频道 - 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去创建出来。

出错误代码:

  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, width:250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},  
  18.             {sortable:false, width: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. });  
  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, width:250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},
  18. {sortable:false, width: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. });

修改正确代码:

  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, width:250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},  
  21.                     {sortable:false, width: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. });  
  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, width:250, align:'left',dataIndex:'bgImgUrl',text:'背景图片'},
  21. {sortable:false, width: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
错误。

Extjs4---Cannot read property 'addCls' of null - heirenheiren的专栏 - 博客频道 - CSDN.NET的更多相关文章

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

    用MVC做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCl ...

  2. Extjs4---Cannot read property 'addCls' of null 或者 el is null 关于tab关闭后再打开不显示或者报错

    做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCls' o ...

  3. 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

  4. org.hibernate.PropertyValueException: not-null property references a null or transient value:

    org.hibernate.PropertyValueException: not-null property references a null or transient value: com.bj ...

  5. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

    在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...

  6. extjs Cannot read property 'dom' of null

    如果你的EXTJS报错: Cannot read property 'dom' of null,那就有可能是因为你的HTML或者JSP文件中的BODY标签里面少了个东西比如代码是: <html& ...

  7. Uncaught TypeError: Cannot set property 'innerHTML' of null

    学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...

  8. hibernate级联保存问题,出错not-null property references a null or transient value

    Servlet.service() for servlet default threw exception org.hibernate.PropertyValueException: not-null ...

  9. 错误:Cannot set property 'innerHTML' of null

    360浏览器代码编辑器里提示错误:Cannot set property 'innerHTML' of null 原因是代码执行时要调用的内容不存在

随机推荐

  1. php - preg_match

    任务:匹配一个函数名或者变量名,如果碰到alpha,numeric,_以外的全部不允许通过. 实验1: <?php //第一个字符不符合就直接退出正则匹配 $str = '%abcscript% ...

  2. # 泰语字符串字符分割 --- UTF-8编码格式

    1.泰语编码格式 泰语用的编码格式是:ISO 8859-11,这个是Latin编码系列,是从"ISO-8859-1"发展过来的,采用的是8bit一个字,所以泰语中的英文字母或者数字 ...

  3. FRP 浅析

    一.Reactive? 请先看一个非常简单的小应用,它允许用户在一个搜索输入框里输入关键词,然后在其下方的结果区域实时显示从Flicker网站搜索得到的图片,当用户输入的关键词发生变化,显示的图片也会 ...

  4. OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种方式(让OpenCVManager永不困扰)

    OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种方式(让OpenCVManager永不困扰) 前文曾详细探讨了关于OpenCV的使用,原本以为天下已太平.但不断有人反 ...

  5. Python中元素定位探讨

    以下以阿里云(10.10.1.11)系统中考试答题为例进行了python脚本的编写研究.模糊定位(定位一些动态值): ————————————————————————————————————————— ...

  6. js框架——angular.js(3)

    1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个cur ...

  7. Android开发10.2:UI组件AutoCompleteTextView(自动完成文本框)

    概述 AutoCompleteTextVeiw(自动完成文本框)从 EditText派生而出  PS :EditText用法介绍           当用户输入一定字符后,自动完成自动完成文本框会显示 ...

  8. Ubuntu下安装Intellij IDEA和PyCharm

    需要先安装JDK 官网下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载 ...

  9. Redis(2)用jedis实现在java中使用redis

    昨天已经在windows环境下安装使用了redis. 下面准备在java项目中测试使用redis. redis官网推荐使用jedis来访问redis.所以首先准备了jedis的jar包,以及需要依赖的 ...

  10. 代码异味---Code smell

    程序员应该竭尽全力去写那些重复的代码.以下几点是我目前最需要改进的地方. 重复代码: 相同或者相似的代码存在于一个以上的地方. 长方法: 一个非常长的方法.函数或者过程. 巨类: 一个非常庞大的类. ...