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

標籤：就會   pop   typeerror   tabpanel   property   代碼   function   方式   顯示   

        用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