Borderレイアウトで画面を構成する

Extを使用してレイアウトを構成します。
レイアウトするためには、Viewportクラスを使用して作成します。今回はBorderレイアウトという形のレイアウトをやってみます。

Ext.onReady(function() {

    var viewport = new Ext.Viewport({
        layout:’Border’,
        items:[
        {
            id: ‘north-panel’,
            region: ‘north’,
            html: ‘<p>North</p>’,
            split: false
        },
        {
            id: ‘west-panel’,
            region: ‘west’,
            html: ‘<p>West</p>’,
            split: true
        },
        {
            id: ‘center-panel’,
            region: ‘center’,
            html: ‘<p>Center</p>’,
            split: true
        },
        {
            id: ‘east-panel’,
            region: ‘east’,
            html: ‘<p>East</p>’,
            split: true
        },
        {
            id: ‘south-panel’,
            region: ‘south’,
            html: ‘<p>South</p>’,
            split: false
        }
        ]
    });

});

こんな感じです。

{ ～ } までの間にidやregisonなどの設定を行っていきます。
この{ ～ }内はPanelクラスが生成されています。なので、ここで設定できる一覧についてはExt.Panelクラスを参照してください。