Ext JSでExt.Buttonを使用する

★過去の記事

第1回

第2回

第3回

第4回

今回はボタンコンポーネントを取り上げます。

何故ここで？と思うかもしれませんが、今後解説する予定のツールバーで使いますので、ここで言及しておきます。

★使用法

簡単です。例によって作成時にコンフィグオブジェクトを渡せば良いだけです。

強いて重要な点を挙げるとすれば、ハンドラの設定方法ですね。

とにかく使用例を挙げます。

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

    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
        })
    }
});

上から見ていきましょう。

最初にパネルを作成しています。幾つかコンフィグ項目があった後、itemsコンフィグの中で複数のボタンが作成されています。

ボタンのキャプションはtextコンフィグで設定します。

上から3番目までのボタンは、それぞれdisabled、hidden、enableToggleコンフィグがtrueになっています。

• disabled：無効状態にする。
• hidden：非表示にする。
• enableToggle：トグルボタンにする。

4番目以降はハンドラの設定方法がそれぞれ異なっています。

4番目は無名関数を直接ハンドラに設定している例です。

5番目はonclick関数をハンドラに設定しています。渡すのは関数への参照（ポインタ）なので、括弧は付けず関数名だけを書きます。

最後の例はonclick2関数をハンドラに設定していますが、この関数は引数を1個取ります。

しかし、渡さなければならないのは関数への参照（ポインタ）なので、5番目のボタンのように名前を指定するだけの方法では引数が渡せません。

そこで、デリゲートを作りそれを渡すようにします。

Ext JSではFunctionが拡張され、createDelegateという、呼び出した関数のデリゲートを作成する関数が追加されています。

1つ目の引数はスコープで、2つ目の引数が引数リストになります。

例のようにすれば引数を持つ関数をハンドラに指定することが出来ます。

表示結果は以下のようになります。

「ハンドラの設定法（引数あり）」ボタンをクリックすると、メッセージボックスが表示されます。

渡された引数がメッセージとして使われています。

今回はボタンコンポーネントを概観しました。

createDelegateは多用しそうな機能です。

（第5回終）

-ExtJS