情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Ext JSでExt.Toolbarを使用する

★過去の記事

第1回

第2回

第3回

第4回

第5回

今回のメインテーマはツールバーです。

ツールバーの作成にボタンを使いますので、前回の記事を見ていない方はざっと目を通しておいた方が良いかもしれません。

★基本

ツールバーは単独で生成することが可能です。

下の例では何も項目の無いツールバーをパネルの内部に作っています(厳密に言うと、何の内容も無いツールバーのボタン項目を1つ作っている)。

Ext.onReady(function()
{
    var myPanel = new Ext.Panel(
    {
        id: "myPanel",
        title: "ツールバーのテスト",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        autoScroll: true,
        items:
        [new Ext.Toolbar(
        [{
        }])]
    });
});

パネルにツールバーが追加された。マウスを左端に乗せると空のボタンがあるのが分かる。

しかし、パネルではtbarbbarの両コンフィグで、上部に表示するツールバーと下部に表示するツールバーを設定することが出来ます。

普通は、このコンフィグ内でツールバー項目を設定します。

Ext.onReady(function()
{
    var myPanel = new Ext.Panel(
    {
        id: "myPanel",
        title: "ツールバーのテスト",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        autoScroll: true,
        tbar: [<上部ツールバー項目>],
        bbar: [<下部ツールバー項目>]
    });
});

上部/下部ツールバーにボタンを追加する場合はExt.Toolbar.Buttontbar又はbbarに追加します。

Ext.Toolbar.Buttonは名前と内部実装が違うだけで、前回解説したExt.Buttonと使える機能は全く同じです。

使用例を以下に示します。前回作ったボタンを上部ツールバーに移動しました。

Ext.onReady(function()
{
    var myPanel = new Ext.Panel(
    {
        id: "myPanel",
        title: "ツールバーのテスト",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        autoScroll: true,
        tbar:
        [{
            text: "無効",
            disabled: true
        },
        {
            text: "非表示",
            hidden: true
        },
        {
            text: "トグル",
            enableToggle: true
        },
        {
            text: "ハンドラの設定法(無名関数)",
            handler: function()
            {
                Ext.MessageBox.show(
                {
                    title: "通知",
                    msg: "ボタンが押されました。",
                    width: 400,
                    buttons: Ext.MessageBox.OK
                })
            }
        },
        {
            text: "ハンドラの設定法(引数なし)",
            handler: onclick
        },
        {
            text: "ハンドラの設定法(引数あり)",
            handler: onclick2.createDelegate(this, ["いっしょにお菓子を食べませんか"])
        }],
        bbar:
        [{
            text: "終了"
        }]
    });

    function onclick()
    {
        Ext.MessageBox.show(
        {
            title: "通知",
            msg: "ゆっくりしていってね!!!",
            width: 400,
            buttons: Ext.MessageBox.OK
        })
    }

    function onclick2(message)
    {
        Ext.MessageBox.show(
        {
            title: "通知",
            msg: message,
            width: 400,
            buttons: Ext.MessageBox.OK
        })
    }
});

「ハンドラの設定法(無名関数)」ボタンを押した時のスクリーンショット。

★テキスト/Fill/セパレータ/スペーサ

ボタンの他にテキスト/Fill(日本語で何というか分からない)/セパレータ/スペーサをコンフィグから挿入することが出来ます。

それぞれ、Ext.Toolbar.TextItemExt.Toolbar.FillExt.Toolbar.SeparatorExt.Toolbar.Spacerで定義されていますが、これらの項目を追加するときは普通省略記法を使います。

Ext.onReady(function()
{
    var myPanel = new Ext.Panel(
    {
        id: "myPanel",
        title: "クォーク/レプトン",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        autoScroll: true,
        tbar:
        [
            "アップ",
            " ",
            "チャーム",
            " ",
            "トップ",
            "-",
            "ダウン",
            " ",
            "ストレンジ",
            " ",
            "ボトム",
            "->",
            "電子ニュートリノ",
            " ",
            "ミュー・ニュートリノ",
            " ",
            "タウ・ニュートリノ",
            "-",
            "電子",
            " ",
            "ミュー粒子",
            " ",
            "タウ粒子"
        ],
        bbar:
        [
        "->",
        {
            text: "終了"
        }]
    });
});

テキストは文字列をそのまま指定し、Fillは->、セパレータは-、スペーサは を指定します。

上の例の結果は下のようになります。

(第6回終)

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-ExtJS