¿Cómo cerrar la ventana modal extjs al hacer clic en la máscara?

Question

Si puedo crear una ventana modal:

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

¿Cómo sé cuando un usuario ha hecho clic en la máscara fuera de la ventana? En Sench Touch, hay una configuración hideOnMaskTap que me permite especificar. ¿Cuál es el evento/config para extJS?

Answer 1

caso del tranvía (tipo de) funciona en ventanas modales modales o no. Pero no en caso de que los componentes secundarios como la lista de límites de un cuadro combinado floten fuera de los límites de Windows.

Sin embargo, si utiliza ventanas modales de todos modos, puede escuchar un clic en la máscara de esta manera.

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

se puede escuchar todos los eventos de clic, a continuación, comprobar si la posición es clic fuera de la ventana

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(); 
     } 
    } 
} 

Answer 3

Puede probar esto también:

Ext.getBody().on('click', function(e, t){ 
    var el = win.getEl(); 

    if (!(el.dom === t || el.contains(t))) { 
     win.close(); 
    } 
}); 

Answer 4

me encontré con la adición de un oyente al cuerpo y la comprobación de las clases css sentía un poco hackey a mí. En realidad puede anular el método privado _onMaskClick de Ext.ZIndexManager (consulte, completamente no hackey). Lo que le permite agregar su propio parámetro de configuración (e incluso evento) a todas las ventanas.

Ext.define('MyApp.ux.ZIndexManager_maskClick', { 
    override: 'Ext.ZIndexManager', 

    _onMaskClick: function() 
    { 
    if (this.front) 
    { 
     var allowed = this.front.fireEvent('maskclick', this.front, this.mask); 

     if (allowed !== false && this.front.closeOnMaskClick) 
     this.front.close(); 
    } 
    return this.callParent(arguments); 
    }, 
});