Ext.Windowの閉じるボタンを無効にする

ども、小堤です。

さて、久々にコード。

Ext.Windowは、初期状態でclosableがtrueに設定されています。なんで、右上に×ボタンが表示され、押すとウィンドウが閉じます。

Ext.Windowは2種類の閉じ方があり、初期状態ではcloseです。これは、closeActionをhideに設定することで、hideで閉じることができます。

まぁ、この2つの違いは、ウィンドウを閉じたときに「インスタンスが破棄されるか、されないかの差」です。

つまり、closeActionがhideであれば隠しているだけで、ウィンドウインスタンスは消えていませんが、closeの場合はウィンドウインスタンスが消えます。

さて、本題に・・・。

この×ボタンのことを「ツールボタン」と呼びます。

ウィンドウ全体を無効化(disabled)にするのではなく、キャンセルボタンなどを配置してウィンドウを閉じるとしましょう。ウィンドウ全体を無効化するのであれば、関係ないんですが何か処理をしていてウィンドウをその間閉じてほしくないシーンがあります。

そんなときに、キャンセルボタンは無効化できても、ツールボタンは無効化できません。

それを実装してみます。

１．ツールボタンを取得する

このツールボタン、実はExt.Panelのtoolsで設定しているものと同じです。

で、これをgetTool( ‘close’ )で取得します。

このメソッドはExt.Panelで実装されているため、Ext.Panelでも同じことができます。

２．ツールボタンを無効化にする

なんも、setDisabledすりゃーいいじゃん。

というのりでいくと、こけます。

っていうのも、setDisabled自体がありません。

まずは、見た目だけの制御。

getTool( ‘close’ ).mask();

getTool( ‘close’ ).unmask();

マスクをかけたほうが、無効化状態っぽく見えます。

しかし、これだけではウィンドウは閉じてしまいます。見た目だけですから・・。

３．閉じる処理を制御する

beforehideのイベントハンドラを記述して、戻り値で閉じるかどうかを制御する。

僕の場合、キャンセルボタンの有効状態と連動させたいので

        this.on( ‘beforehide’, function( p ) {

            var btnCancel = Ext.getCmp( this.id + ‘-btn-cancel’ );
            return !btnCancel.disabled;

        }, this );

って感じで。

ボタンがdisabledになっていれば、ウィンドウは閉じない。その逆もしかり。

で、２．で紹介した見た目をボタンの状態（ここでは、キャンセルボタンの状態）が変更されるタイミングで一緒に変えてあげればOK。

特別、Ext.Windowの×ボタンに対する制御メソッドがなかったので、メモ。

参考になれば～☆