extjs - ExtJS フローティング ウィンドウのフォーカス喪失の検出

Question

フローティング ウィンドウがフォーカスを失ったかどうかを検出する効率的な方法があるかどうか疑問に思っています。ユーザーの一時的な入力用のフローティング ウィンドウがあります。ユーザーが入力操作後にウィンドウを非表示にするのを忘れた場合 (たとえば、他の場所をクリックした場合)、このウィンドウを自動的に非表示にします。ウィンドウの要素でぼかしイベントを使用しようとしましたが、何も起こりませんでした。動作するデモ:デモ

アイデアをありがとう！

Answer 1

これは、blur イベントを ext ウィンドウ要素に追加することで実現できます。以下はサンプル コードです。

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'button',
                text: 'Done',
                listeners: {
                    click: {
                        fn: me.onDoneButtonClick,
                        scope: me
                    }
                }
            }
        ],
        listeners: {
            el: {
                blur: {
                    fn: me.onWindowLoseFocus,
                    scope:me
                }
            }               
        }
    });

Answer 2

ウィンドウがぼかされているかどうかを検出する前に、最初にウィンドウをぼかすためのアクションが必要です。ユーザーが「他の場所をクリックした」場合にウィンドウをぼかしたいとおっしゃいました。これは、mainPanel にリスナーを追加することで実現できます。

var mainPanel = new Ext.Panel({ //define a main non-floating panel
    title: 'main',
    id: 'mainPanel',
    width: 400,
    height: 400,
    listeners: {
        afterrender: function(self) {
            self.body.on('click', function() {
                alert('clicked')
            });
        }
    }

});

パネル本体がクリックされたら、floatWin をぼかして、リッスンしているイベントが実際に発生するようにすることができます。