1

Rails/sencha ハイブリッド アプリで、Ext.window.Windowコンポーネント内に小さな iframe を表示するクラスを定義しました。

設定時のデフォルトの動作であるESCボタンを押したときにこのウィンドウを閉じたいと思いmodal: true ます。ウィンドウがフォーカスを維持できるように、ウィンドウに再びフォーカスを与えるために、blur イベントと focus イベントを使用しようとしています。

Ext.require([
    'Ext.window.*'
]);

Ext.define('App.ModalWindow', {
    id: 'modalwindow',
    extend: 'Ext.window.Window',
    alias: 'widget.modalwindow',
    title: 'Component Details',
    autoShow: true,
    height: 250,
    modal: true,
    draggable: true,
    resizable: false,
    width: 550,
    layout: 'fit',
    header: false,

    listeners: {
        el: {
            blur: {
                fn: function() {console.log('loss'); this.focus()},
            },
            focus: {
                fn: function() {
                    console.log('focus')
                },
            }
        }
    },

    buttons: [
        {
            text   : 'Close',
            handler: function () { this.up('.window').close(); }
        }
    ],

    initComponent: function() {
        var me = this;

        //Close modal window when clicking on mask
        me.mon(
            Ext.getBody(),
            'click',
            function(el, e){me.close();},
            me,
            { delegate: '.x-mask' }
        );

        //Add iframe to window
        me.items = [{
            xtype: "component",
            style: {
            padding: '10px'
            },
            autoEl: {
                tag: 'iframe',
                frameborder: 0,
                src: me.detail_link
            }
        }];

        //Call superclass' initComponent
        me.callParent(arguments);
    }
});


//Add an event luistener to the window, in order to center the modal window when the browser is resized
//first check if modalwindow exists, cause otherwise calling the center() method on a non-existing object
//will stop the event propagation
Ext.EventManager.onWindowResize(function () {
    if( Ext.getCmp('modalwindow'))    {
        Ext.getCmp('modalwindow').center();
    }
});

残念ながら、これは機能しません。iframe をクリックするとぼかしがトリガーされてから再びフォーカスされますが、iframe を 2 回クリックしても同じ効果は得られません。最も重要なのは、ESC ボタンを押してもウィンドウが閉じないことです。

私は何を間違っていますか？ウィンドウ内のiframeをクリックしても、ESCボタンでウィンドウを閉じるにはどうすればよいですか?

4

0 に答える 0