BorderLayoutのネスト - 平松祥史の日記

ExtのBorderLayoutで以下の図のようなインターフェースを作りたい場合は、BorderLayoutを「ネスト」させる。

以下、BorderLayoutのメモ。

layout:'border' を指定したとき、デフォルトでコンテナになるのはPanel。TabPanelなど他のウィジェットも指定できる。
titleプロパティでタイトル部分を、contentElプロパティに中身になるHTMLのidを指定する。
BorderLayoutは'center'が必須。centerの周りにnorth、west、south、eastを追加していくという考え方で配置していく。
JavaScriptのレイアウト用のオブジェクトが見た目の構造を保持するので、中身になる方の要素は階層になっている必要は無い。
itemsに中身をhashで指定する。中身の要素がitemsを持てばネストする。

<html>
<head>
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            { region: 'west',
              title: 'West',
              width: 100,
              contentEl: 'west-div'
            },
            { region: 'center',
              layout: 'border',
              items: [
                   { region: 'north',
                     title: 'Center:North',
                     height: 100,
                      contentEl: 'center-north'
                    },
                   { region: 'center',
                     layout: 'border',
                     items: [
                            { region: 'west',
                              title: 'Center:Center:West',
                              contentEl: 'center-center-west'
                            },
                            {region : 'center',
                              title: 'Center:Center:Center',
                              contentEl: 'center-center-center'
                            }
                     ]
                   }
              ]
            }
        ]});
});
</script>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
</head>
<body>
<div id="west-div" style="background-color: #DDDDFF;height: 100%"></div>
<div id="center-north" style="background-color: #FFDDDD;height: 100%"></div>
<div id="center-center-west" style="background-color: #DDFFDD;height:100%"></div>
<div id="center-center-center" style="background-color: #FFFFDD;height:100%"></div>
</body>
</html>