Question

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

Slider thumb appears above the dropped down menu

我有点追踪问题，它与topZIndex中的Thumb.js属性有关。

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 似乎是个问题。即使单个滑块只有一个拇指，也会调用此方法。

我尝试过的内容：如果没有进入ExtJS源并更改topZIndex，我已经尝试过：

创建滑块时将topZIndex设置为0（没有效果，因为它不是有效的属性）
设置style' property when I create the slider样式：{z-index：＆＃39; 0＆＃39; }`

使用＆＃39;更改＆＃39;侦听器尝试设置样式：

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

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

Answer 1

在Thumb.js内，有一个名为sendToBack()的方法，它将滑块的拇指返回到z-index为0.看起来这应该在onDragEnd方法中Slider班的，但唉！

我基本上是通过使用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()

Answer 2

建议覆盖以与ExtJs 6.0.0.640一起使用

<body>

        <h2> hier komt een kleine foto</h2>
        <form action='./search.php' method='get'>
            <input type='text' name='s'size='50' value='<?php echo $_GET['s']; ?>' />
            <input type='submit' value='Zoek'/>
        </form>
        <hr />
        <?php       
            $s = $_GET['s'];            
            $terms = explode (" ", $s);
            $query = "SELECT * FROM 'ID' WHERE ";

            foreach ($terms as $each){
                $i++;

                if ($i ==1)
                    $query .= "keywords LIKE '%$each%' ";
                else
                    $query .= "OR keywords LIKE '%$each%' ";
            }
            //connect to database
            mysql_connect("server", "username", "password");
            mysql_select_db("database");

            $query = mysql_query($query);
            $numrows = mysql_num_rows($query);
            if(numrows > 0){

                while($row = mysql_fetch_assoc($query)){
                    $id = $row['id'];
                    $photo = $row['photo'];
                    $title = $row['title'];
                    $description = $row['description'];
                    $price = $row['price'];
                    $Link = $row['Link'];
                    $keywords = $row['keywords'];

                    echo  "<h2><a href='$Link'>$title</a></h2>
                    $description<br  /><br  />";
                }

            }
            else
                echo "Geen resultaat gevonden voor \"<b>$s</b>\"";

            //disconect
            mysql_close();
        ?>
</body>
</html>

ExtJS滑块z-index问题

2 个答案: