ExtJS 2.0 実践的かつ簡潔なチュートリアル ボーダーエリアlayout_extjs

このレイアウトでは、コンテナを南東、北西、北西の 5 つのエリアに分割し、それぞれ東、南、西、北、中央で表します。コンテナにサブ要素を追加するときは、これらのサブ要素の位置を指定するだけで済みます。 Border レイアウトは、レイアウトで指定された位置に子要素を自動的に配置します。以下のコードを見てください:

コードをコピー コードは次のとおりです:

Ext.onReady (function() {
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"Topパネル"}、
{region:"south"、
height:50、
title:"底部パネル"}、
{region:"center"、
title:"センターパネル"},
{region:"west",
width:100,
title:"左パネル"},
{region:"east",
width:100,
title:" 右パネル"}
]
});

上記のコードを実行すると、ページ内に 5 つの領域を含むパネルが出力されます。下、左、中、次のように図に示すように: