如何在单击蒙版时关闭模态窗口extjs？

Question

如果我创建一个模态窗口:

Ext.define('myWindow', {
    extend: 'Ext.Container',
    alias: 'widget.myWindow',
    floating: true,
    modal: true,
    listeners:
        'onMaskClick???': { close the window }
    .....
}

我怎么知道用户何时点击了窗外的面具？在Sench Touch中,有一个config hideOnMaskTap可以让我指定.extJS的事件/配置是什么？

Answer 1

Tramway的情况(有点)适用于模态窗口或非模态窗口.但是,如果像组合框的绑定列表这样的子组件浮动在窗口边界之外,则不会出现这种情况.

但是,如果你使用模态窗口,你可以像这样在面具上监听点击事件.

Ext.define('myWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.myWindow',
    floating: true,
    modal: true,

    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.mon(Ext.getBody(), 'click', function(el, e){
            me.close(me.closeAction);
        }, me, { delegate: '.x-mask' });
    }
});

Answer 2

您可以收听所有点击事件,然后检查点击位置是否在窗口外

Ext.define('myWindow', {
    extend: 'Ext.Container',
    alias: 'widget.myWindow',
    floating: true,
    modal: true,

    initComponent: function () {
        this.initEvents();
        this.callParent();
    },

    initEvents: function () {
        //make sure your window is rendered and have sizes and position
        if(!this.rendered) {
            this.on('afterrender', this.initEvents, this, {single: true});
            return;
        }

        this.mon(Ext.getBody(), 'click', this._checkCloseClick, this);
    }

    _checkCloseClick: function (event) {
        var cx = event.getX(), cy = event.getY(),
            box = this.getBox();

        if (cx < box.x || cx > box.x + box.width || cy < box.y || cy > box.y + box.height) {
            //clean up listener listener
            this.mun(Ext.getBody(), 'click', this._checkCloseClick, this);
            this.close();
        }
    }
}