15 Temmuz 2010 Perşembe

ExtJs.Window için Sürükle Bırak (Drag'n Drop) Düzeltmesi

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

1 yorum:

Sidar KARADAĞ dedi ki...

Çok güzel gerçekten sağolun. Bakaam tekrar buraya. sesli chat