ExtJS 滑块 z-index 问题

Posted 2023-02-26

【中文标题】ExtJS 滑块 z-index 问题

【英文标题】：ExtJS slider z-index issue

【发布时间】：2014-03-26 16:59:33

【问题描述】：

我正在使用 ExtJS 创建一个单滑块，它恰好位于下拉菜单下方。我注意到每次选择拇指时，z-index 都会设置为 10,000。打开菜单时会导致问题：

我找到了问题所在，它与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-index 将给定的拇指移动到所有其他拇指之上似乎是问题所在。尽管单个滑块只有 1 个拇指，但正在调用此方法。

我的尝试： 没有进入 ExtJS 源代码并更改 topZIndex，我尝试过：

在我创建滑块时将 topZIndex 设置为 0（不起作用，因为它不是有效的属性） 设置style' property when I create the sliderstyle: z-index: '0' `

使用 'change' 监听器尝试设置样式：

change: function( slider, newValue, thumb, eOpts )

  ...
  thumb.getEl().setStyle('z-index',  '0');
  slider.getEl().setStyle('z-index', '0'); //tried both of these

问题：有没有办法解决这个问题？这是 ExtJS 的一个错误，因为单个拇指不需要出现在另一个拇指上方吗？

【参考方案1】：

在Thumb.js 内部，有一个名为sendToBack() 的方法，它将滑块的拇指返回到z-index 0。看起来这应该在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()

【参考方案2】：

建议使用 ExtJs 6.0.0.640 覆盖

/**
 * Multi.js
 * 
 * <pre>
 * - FIX zIndex of the thumb (inspired by @link http://***.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);
        
    
);