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

Ext.Panelクラスは、タブパネルやグリッドパネルのスーパークラスです。
Ext.Panelのよく使うコンフィグについてまとめておきます。

全てのコンフィグ・オプションはAPI ドキュメントを参照してください。
Ext.Panel – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.Panel

Ext.Panelのコンフィグ

基本
title : String タイトルを設定する。
iconCls : String パネルのタイトルの左にアイコン画像を配置します。CSSクラスで指定。CSSに指定したクラスにスタイルを記述する。
例. 日本語ドキュメントより

// CSSクラスをコンフィグオプションで設定する:
...
iconCls: 'my-icon'

// アイコンイメージとして使用されるバックグラウンドイメージを指定するCSSクラス:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important;

アイコンのスタイルは必ず「important」にしなければいけないので注意。

折りたたみ関係
collapsed : Boolean　true = 折りたたまれた状態（デフォルト:false）
collapsible : Boolean 折りたたみ可能かどうか（デフォルト:false）
animCollapse : Boolean 折りたたみ時のアニメーション設定(デフォルト:true)
titleCollapse : Boolean　タイトルバークリックで折りたたみを実行する（デフォルト:false）

ボーダー関係
border : Boolean パネルのボーダー設定(デフォルト:true)
frame : Boolean パネルのデザインを角丸にする（デフォルト:false）

内容関係
html : String/Object パネル内部に設定するエレメントを記述。文字列でHTMLを記述するかExt.Elementオブジェクトを設定する。

ツールバー関係
tbar : Object/Array　パネル上部にツールバーを設定。
bbar : Object/Array　パネル下部にツールバーを設定。

//ボタンが押されたら呼ばれる関数を作っておく
var buttonAction = function(button,event){
    Ext.Msg.alert('ボタンが押されました', button.text +'が押されました');
}

    ...

new Ext.Panel({
    tbar:[
        {
            text:'ボタン1',
            handler:buttonAction
        },
        '->',//'->'で右寄せになる
        {
            text:'ボタン2',
            handler:buttonAction
        }
    ]

    ...

});

他にもパネルはExt.Containerクラスのコンフィグを設定できます。（layoutなど。Ext.Containerは、また別の機会に取り上げます。）

基本的なExt.Panelのコンフィグを沢山設定したサンプル。

Ext.onReady(function(){
    var buttonAction = function(button,event){
        Ext.Msg.alert('ボタンが押されました', button.text +'が押されました');
    }
    var panel = new Ext.Panel({
        //レンダリングのターゲット
        renderTo:Ext.getBody(),

        //ID設定
        id:'myPanel',

        //タイトル周り
        title:'titleCollapseがTrueならタイトルクリックで開く',
        iconCls:'caution',

        width:'auto',
        height:500,
        margins:'3 3 3 3',

        //折りたたみ関係
        collapsed:true,
        collapsible:true,
        titleCollapse:true,
        animCollapse:true,

        //ボーダー周り
        bodyBorder:true,
        border:true,
        //frame:true,

        //ツールバー周り

        tbar:[
            {
                text:'ボタン1',
                handler:buttonAction
            },{
                text:'ボタン2',
                handler:buttonAction
            },
            '->',//'->'で右寄せになる
            {
                text:'ボタン3',
                handler:buttonAction
            },{
                text:'ボタン4',
                handler:buttonAction
            }
        ],

        //パネルの内容
        html:'htmlコンフィグには、<br/> <b>HTML</b>が直接かける。',

        //レイアウト関係

        /*htmlコンフィグがあっても上に描画されるので問題ないが、
        気持ち悪いのでhtmlを消してから設定したほうがよい。
        layout:'border',
        items:[
            {
                xtype:'panel',
                title:'センター',
                region:'center',
                html:'センターのパネル'
                },{
                xtype:'panel',
                title:'左パネル',
                region:'west',
                collapsible:true,
                split:true,
                maxWidth:200,
                html:'左のパネル'
                },{
                xtype:'panel',
                title:'ヘッダー',
                region:'north',
                html:'ヘッダーのパネル'
            }
        ]*/
    });
});

Ext.Panelクラスは様々なパネルの基本になるため、ここであげたコンフィグを覚えておくとその他のパネルクラスを作るときに役立つと思います。