2011-02-09 4 views
1

ボタンをクリックしてテスト用の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(); 
}); 
+0

は、私はあなたが買うとジェイ・ガルシアによって「アクション内のExtJS」を使用することをお勧め。優れた本であり、学習曲線がとても穏やかになります。 – Mchl

答えて

7

layout: 'border'を使用しているため、ビューポートはExt.layout.BorderLayoutになります。

  • のBorderLayout 必見を使用して、任意のコンテナが region:'center'と子アイテムを持っている:このレイアウトのドキュメントでは、このノートを見つけることができます。 中央領域の子アイテムは、 の残りのスペースを埋めるために常にサイズ変更され、 はレイアウト内の他の領域で使用されません。あなたはExtJSのに真剣にダイビングを計画している場合は
関連する問題