我想簡單地點擊一個按鈕並執行一些ExtJS代碼進行測試，但是這個ExtJS代碼給了我錯誤this.el is null。 爲了讓這段代碼正常工作，我需要做些什麼？這個ExtJS代碼爲什麼會得到錯誤「this.el is null」？

main.js：

Ext.onReady(function() { 

    var button = new Ext.Button('button-div', { 
     text: 'hello', 
     handler: function() { 
      alert('pressed'); 
     } 
    }); 

    viewport = new Ext.Viewport({ 
     layout: 'border', 
     items: [ button ] 
    }); 

    viewport.doLayout(); 

});

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"> 
     <script type="text/javascript" src="ext/adapter/ext/ext-base.js"> 
     </script> 
     <script type="text/javascript" src="ext/ext-all-debug.js"> 
     </script> 
     <script type="text/javascript" src="js/main.js"></script> 
    </head> 
    <body> 

    </body> 
</html>

工作代碼：

感謝您的指針@Mchl，它現在可以與下面的代碼：

Ext.onReady(function() { 

    var button = new Ext.Button({ 
     text: "Click this", 
     handler: function() { 
      alert('pressed'); 
     } 
    }); 

    var regionContent = new Ext.Panel({ 
     region: 'center', 
     padding:'10', 
     autoScroll: true, 
     items: [ button ] 
    }); 

    viewport = new Ext.Viewport({ 
     layout: 'border', 
     items: [ regionContent ] 
    }); 

    viewport.doLayout(); 
});

來源

2011-02-09 Edward Tanguay

如果你打算認真鑽研ExtJS的，我建議你買和傑伊·加西亞用「在行動ExtJS的」。優秀的書，讓學習曲線變得更溫和。 – Mchl 2011-02-09 14:13:35

您正在使用使您的視口使用Ext.layout.BorderLayout的layout: 'border'。在此佈局的文檔，你會發現這樣一個字條：

使用BorderLayout的必須任何容器有一個子項與 region:'center'。中心區域中的子項目始終將調整大小以填充佈局中其他區域未使用的剩餘空間。

來源

2011-02-09 14:03:43 Mchl

這個ExtJS代碼爲什麼會得到錯誤「this.el is null」？

工作代碼：

回答

相關問題