ExtJSで楽しくRIA業務アプリ開発

今回はExt.Panelクラスについてです。Ext.PanelクラスはExtJSの開発では、ユーザーの目に見える部分を構築する要素になります。
パネルクラスは以下のように継承されています。

Observable
Component
BoxComponent
Container
Panel

APIドキュメントでExt.Panelクラスを開くと、こんな感じで定義されています。

Ext.Panelクラス
パッケージ: Ext
定義ファイル: Panel.js
クラス: Ext.Panel
サブクラス: ButtonGroup, TabPanel, Tip, Window, FieldSet, FormPanel, GridPanel, TreePanel
継承元: Container
xtype: panel

http://extdocs.xenophy.com/?class=Ext.Panel

パネルはContainerのサブクラスでxtypeはpanelとして定義されています。またサブクラスにはTabPanelやGridPanelがあります。
さらにこう書かれています。

パネルは、特定の機能性を持つコンテナと、アプリケーション指向のユーザインタフェースのための完全な構造的基礎となる構造的コンポーネントです。
パネルは、継承元である Ext.Container のプロパティによって、レイアウトで配置することができ、そして子コンポーネントを含むことができます。

パネルクラスはExtJSのUIを含める目に見える部分を構成する単位になります。パネルごとに機能を持たせそれをブラウザ上に配置することで複数の機能を持った画面を構成できます。
またViewportのitemsに指定するように、パネルは他のコンポーネントの中にレイアウトで配置することができ、さらに子のコンポーネントも同じように持つことができる(Ext.PanelがExt.Containerのサブクラス)ということになります。つまりパネルはViewportでやったのと同じようにレイアウトを設定して、さらに細かく画面を分割できるということです。
実際のところパネルクラスで使う機能の多くはその上位クラスであるContainerやComponentで実装されています。いきなりComponentクラス等の上位クラスを使うには、ハードルが高いので、パネルクラスをスタート地点にしてContainer、BocComponentと理解していく方が見通しがよいと思います。

まず簡単なサンプルで実際にパネルを作ってみます。

Ext.onReady(function(){
    var centerPanel = new Ext.Panel({
        id:'centerPanel',
        region:'center',
        title:'Center Panel',
        bodyStyle:'padding:50px;text-align:center;',
        html:'<h1>パネル</h1>',
        margins:'3 3 3 3'
    })

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
         centerPanel,
         {
          id:'southPanel',
          region:'south',
          xtype:'panel',
          title:'South Panel',
          bodyStyle:'padding:50px;text-align:center;',
          html:'<h1>下パネル</h1>',
          margins:'3 3 3 3'
         }
        ]
    });
});

ここでは2つの作り方でパネルを生成しています。centerPanelでは new Ext.Panelでパネルを作り、Viewportに渡しています。下パネルはオブジェクトリテラルのxtypeでパネルを生成しています。xtypeでpanelをわざわざ指定していますが、xtypeのデフォルトはpanelなので省略しても大丈夫です。この2つの生成の違いはこちらで解説しています。
ExtJS入門5 xtypeを使ってパネルを作る。

次にViewportに２つのパネルを配置して、さらに各パネル内をボーダーレイアウトにしてみます。せっかくなのでxtypeを使って書いていきます。new Ext.Panel()と書き換えても見た目は同じなります。

Ext.onReady(function(){
    new Ext.Viewport({
        id:"viewport",
        layout:'column',
        listeners:{
            resize:function(){
                //画面にフィットさせる
                var left = Ext.getCmp('leftPanel');
                left.setHeight(Ext.getCmp('viewport').getHeight());

                var right = Ext.getCmp('rightPanel');
                right.setHeight(Ext.getCmp('viewport').getHeight());
            }
        },
        items:[ //viewportの子アイテム
            {
                id:'leftPanel',
                title:'Left Panel',
                columnWidth: .5,
                layout:'border',
                items:[  //  左のパネルの子アイテム xtype = panel
                    {
                        id:'leftCenter',
                        title:'左の真ん中',
                        region:'center',
                        html:"左真ん中"
                    },
                    {
                        id:'leftNorth',
                        title:'左の上',
                        region:'north',
                        html:"左真ん上"
                    },
                    {
                        id:'leftSouth',
                        title:'左の下',
                        region:'south',
                        html:"左真ん下"
                    },
                    {
                        id:'leftEast',
                        title:'左の右',
                        region:'east',
                        html:"左真ん右"
                    },
                    {
                        id:'leftWest',
                        title:'左の左',
                        region:'west',
                        html:"左真ん左"
                    }
                ]
            },
            {   //ここからが右のパネル xtype = panel
                id:'rightPanel',
                title:'Right Panel',
                columnWidth: .5,
                layout:'border',
                items:[  //  右のパネルの子アイテ�
                    {
                        id:'rightCenter',
                        title:'右の真ん中',
                        region:'center',
                        html:"右の真ん中"
                    },
                    {
                        id:'rightNorth',
                        title:'右の上',
                        region:'north',
                        html:"右の上"
                    },
                    {
                        id:'rightSouth',
                        title:'右の下',
                        region:'south',
                        html:"右の下"
                    },
                    {
                        id:'rightEast',
                        title:'右の右',
                        region:'east',
                        html:'右の右'
                    },
                    {
                        id:'rightWest',
                        title:'右の左',
                        region:'west',
                        html:'右の左'
                    }
                ]
            }
        ]
    });
});

Viewportの設定と同じようにパネルにもlayoutを設定して、子となるパネル(leftPanel,rightPanel)をitemsに指定しています。ただボーダーレイアウトの中にボーダーレイアウトを入れると各パネルの範囲が小さくなるのであまりおすすめはできませんね。普通はタブ + 複数のボーダーやグリッド + アコーディオンで複数のパネルのように入れ子にしていきます。
Ext.Panelは一番プレーンなパネルを生成します。上のサンプルではhtmlに設定した文字を配置しているだけです。Firebugで要素を見ると、Ext.Panelは

<div class="x-panel-body">〜</div>

を作成するだけです。Ext.Panelクラスのサブクラス、例えばグリッドパネルなどはもっと複雑なDOMを構築します。

Viewportのコンフィグに付いているlistenersコンフィグでは、Viewportのイベントに対応した処理を設定できます。ここではViewportのResizeイベントをキャッチしています。Resizeイベントの処理は、子となるleftPanelとrightPanelのリサイズを行っています。このイベント処理を書かないと左右のパネルの高さがきちんと設定されません。イベントやExt.getCmpについてはまた別の機会に詳しく紹介します。