1. 程式人生 > >Extjs4---Cannot read property 'addCls' of null

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

ref 一次 fine this lpar 引用 fun all ane

用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