ExtJS滑塊z-index問題

我正在使用ExtJS創建一個單滑塊，恰好在下拉菜單下。我注意到每次選擇拇指時，z-index都被設置爲10,000。這導致當菜單被打開了一個問題：ExtJS滑塊z-index問題

Slider thumb appears above the dropped down menu

我有點找到了問題所在，並具有與Thumb.js的topZIndex物業辦。

Thumb.js：

onBeforeDragStart : function(e) { 
    if (this.disabled) { 
     return false; 
    } else { 
     this.slider.promoteThumb(this); 
     return true; 
    } 
}

promoteThumb去Multi.js（這可能是問題）：

/** 
* @private 
* Moves the given thumb above all other by increasing its z-index. This is 
* called when as drag any thumb, so that the thumb that was just dragged 
* is always at the highest z-index. This is required when the thumbs are 
* stacked on top of each other at one of the ends of the slider's 
* range, which can result in the user not being able to move any of them. 
* @param {Ext.slider.Thumb} topThumb The thumb to move to the top 
*/ 
promoteThumb: function(topThumb) { 
    var thumbs = this.thumbs, 
     ln = thumbs.length, 
     zIndex, thumb, i; 

    for (i = 0; i < ln; i++) { 
     thumb = thumbs[i]; 

     if (thumb == topThumb) { 
      thumb.bringToFront(); 
     } else { 
      thumb.sendToBack(); 
     } 
    } 
}

通過增加移動上述所有其他給定的拇指它的Z指數似乎是問題。即使單個滑塊只有一個拇指，但此方法正在被調用。

我已經試過：中進入ExtJS的來源和改變topZIndex 短，我曾嘗試：

設置topZIndex爲0時，我產生滑動（沒有工作，因爲它不是有效的屬性）
設置style' property when I create the slider風格：{z-index的： '0'}`

使用 '變' 監聽嘗試設置樣式：

change: function(slider, newValue, thumb, eOpts) 
{ 
    ... 
    thumb.getEl().setStyle('z-index', '0'); 
    slider.getEl().setStyle('z-index', '0'); //tried both of these 
}

問：有沒有辦法解決這個問題？這是ExtJS的錯誤嗎，因爲一個拇指不需要出現在另一個拇指上？

來源

2014-03-26 kburbach

內Thumb.js，有一個叫sendToBack()方法，它返回的滑塊時回0的z-index看起來這應該是在Slider類的onDragEnd方法，但很可惜！

我基本上是用dragend事件偵聽器添加它自己：

Ext.create('Ext.slider.Single', 
{ 
    width: 250, 
    value: 10, 
    ... 
    listeners: 
    { 
    ..., 
    dragend: function(slider, e, eOpts){ 
     if(slider && slider.thumbs && slider.thumbs.length === 1){ 
      slider.thumbs[0].sendToBack(); 
     } 
    } 
    } 
})

這裏的關鍵是slider.thumbs[0].sendToBack()

來源

2014-03-26 21:36:36 kburbach

擬覆蓋與ExtJS的6.0.0.640

/** 
* Multi.js 
* 
* <pre> 
* - FIX zIndex of the thumb (inspired by {@link http://stackoverflow.com/questions/22668048/extjs-slider-z-index-issue)} 
* </pre> 
* 
* @class 
* @author Antoine Verron 
* @version $Revision$ Last modifier: $Author$ Last commit: $Date$ 
*/ 
Ext.define('MyApp.overrides.slider.Multi', { 
    override: 'Ext.slider.Multi', 

    initComponent: function() { 
     this.callParent(this); 

     this.on('changecomplete', this.demoteThumbs, this); 
    }, 

    /** 
    * Oposite of promote 
    * 
    * @private 
    */ 
    demoteThumbs: function() { 
     var thumbs = this.thumbStack || (this.thumbStack = Ext.Array.slice(this.thumbs)), ln = thumbs.length; 

     // Then shuffle the zIndices 
     for (i = 0; i < ln; i++) { 
      thumbs[i].el.setStyle('zIndex', 0); 
     } 
    } 
});

使用

來源

2016-05-23 20:16:33 Psycho

ExtJS滑塊z-index問題

回答

相關問題