मास्क पर क्लिक करते समय मोडल विंडो extjs को कैसे बंद करें?

Question

अगर मैं मोडल विंडो बनाने के लिए:

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

मुझे कैसे पता चलेगा जब कोई उपयोगकर्ता खिड़की के बाहर मुखौटा पर क्लिक किया गया है? सेन्च टच में, एक कॉन्फ़िगरेशन hideOnMaskTap है जो मुझे निर्दिष्ट करने देता है। ExtJS के लिए घटना/कॉन्फ़िगरेशन क्या है?

Answer 1

ट्रामवे के मामले से बाहर है अगर जाँच (एक तरह से) मोडल या गैर मोडल खिड़कियों पर काम करता है। लेकिन अगर खिड़कियों के घटक खिड़कियों की सीमाओं के बाहर एक combobox फ्लोट की सीमा की तरह नहीं है।

हालांकि यदि आप मोडल विंडो का उपयोग करते हैं तो भी आप इस तरह के मुखौटा पर एक क्लिक ईवेंट सुन सकते हैं।

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

Answer 3

आप यह भी कोशिश कर सकते हैं:

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

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

Answer 4

मैं शरीर के लिए एक श्रोता जोड़ने और जाँच सीएसएस वर्गों मेरे लिए थोड़ा hackey महसूस किया पाया। आप वास्तव में निजी विधि _onMaskClickExt.ZIndexManager (देखें, पूरी तरह से हैकी नहीं) को ओवरराइड कर सकते हैं। जो आपको सभी विंडोज़ में अपना कॉन्फ़िगरेशन पैरामीटर (और यहां तक ​​कि ईवेंट) जोड़ने की अनुमति देता है।

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