Question

在混合rails / sencha应用程序中，我定义了一个在 Ext.window.Window 组件中显示小iframe的类。

我希望在按下 ESC 按钮时关闭此窗口，这是设置modal: true时的默认行为但是，一旦我在加载的iframe内部单击，此绑定将不再起作用，即ESC按钮不再关闭窗口。我现在正在尝试使用模糊和焦点事件，以便再次为我的窗口提供焦点，以便窗口保持焦点：

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将不会产生相同的效果，最重要的是，ESC按钮仍然不会关闭窗口。

我做错了什么？即使单击窗口内的iframe，如何使用ESC按钮关闭窗口？

Extjs：防止模态窗口失去焦点

0 个答案: