Maske tıklatıldığında kalıcı pencere uzantıları nasıl kapatılır?

Question

Ben kalıcı bir pencere oluşturursanız:

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

kullanıcı penceresinin dışında maske tıkladığında nasıl anlarım? Sench Touch'da, belirtmeme izin veren bir config hide HideMacKap var. ExtJS için olay/yapılandırma nedir?

Answer 1

tramvay davası dışındaysa edip etmediğini kontrol, tüm tıklama olaylarını dinleyebilirsiniz (çeşit) modal veya olmayan modal pencereler üzerinde çalışır. Ancak, bir combobox'ın sınır listesi gibi alt bileşenlerin, windows sınırları dışına çıkması söz konusu değildir.

Yine de kalıcı pencereleri kullanıyorsanız yine de maske üzerindeki bir tıklama olayını dinleyebilirsiniz.

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

Tıklama pozisyon penceresinin

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

Ayrıca bu deneyebilirsiniz:

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

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

Answer 4

ben beden için bir dinleyici ekleme ve css sınıfları bana biraz hackey hissetti kontrol bulundu. Gerçekte özel yöntemini _onMaskClick geçersiz kılabilirsiniz (bkz, tamamen hacker değil). Hangi tüm pencereler için kendi yapılandırma parametresi (ve hatta olay) eklemenizi sağlar.

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