Bir süredir ExtJS ve diğer bazı JS kütüphanelerinden bolca kullanıldığı bir ajax ekranı ile uğraşmaktaydım. Şöyle bir problemle karşılaştım, ekranda bir çok panel açık olduğunda bir Ext.Window açtığımızda Ext.Window'u sürükle bırak yaparken aşağıdaki ekranlarla da etkileşim sürdüğü için takılmalar oluyordu.
Bu sorunu Ext.Window'u "modal pane" olarak yaparak (modal:true) çözebilirdim ama window açıkken arka plan ile etkileşimi kaybetmek de istemiyordum. Bu nedenle ben de şöyle bir çözüm düşündüm: Ext.Window sürükle bırak yapılırken arka plan modal pane haline gelsin (opacity verilen bir mask div'i sayesinde), sürükle bırak tamamlanınca da eski haline dönsün.
...
<div class="ext-el-mask" id="ext-modal-mask"
style="display: none; width: 100%; height: 100%; z-index: 9000;"></div>
...
var originalStartDrag = Ext.Window.DD.prototype.startDrag;
var originalEndDrag = Ext.Window.DD.prototype.endDrag;
Ext.override( Ext.Window.DD, {
startDrag: function() {
Ext.get('ext-modal-mask').show();
originalStartDrag.apply(this, arguments);
},
endDrag: function() {
Ext.get('ext-modal-mask').hide();
originalEndDrag.apply(this, arguments);
}
} );