extjs - 如何在鼠标悬停时将 Extjs 4 绘制组件 Sprite 置于顶部？

Question

如果我将路径添加到 drawComponent 并且它们重叠，则路径将按照它们添加的顺序堆叠。我可以为每个 Sprite 添加一个事件监听器，以便在我将鼠标悬停在上面时它会改变颜色和笔触宽度，但是如何将重叠的路径放在前面？

这是一组改变颜色的监听器:

listeners: {
    mouseover: function(line) {
        line.setAttributes({ stroke: "red", "stroke-width": 8}, true );
    },
    mouseout: function(line) {
        line.setAttributes({ stroke: "black", "stroke-width": 4 }, true );
    }
}

Answer 1

好的，下面的方法可行，但我不得不相信还有更好的方法。您可以通过删除某些内容并将其添加回去来将其移到前面。但是，删除它会删除 mouse* 监听器，所以我不得不将监听器向上移动一个档次，就像这样(这是一个具有 drawComponent 属性的组件(此时是“我”)。

var pathout = function(line,target,opts) {
    line.setAttributes({ stroke: "blue", "stroke-width": 2 }, true );
    line.on('mouseover',pathover, this,opts);
};
var pathover = function(line,target,opts) {
    me.drawComponent.surface.remove(line,true);
    me.drawComponent.surface.add( line ).show(true);
    line.setAttributes({ stroke: "red", "stroke-width": 4}, true );
    line.on('mouseout',pathout,this,opts);

};
this.paths[pathName] = { 
    type: "path", 
    path: "M" + path.join(" L"), 
    stroke: next_color, 
    "stroke-width": 2,
    listeners: {
        mouseover: pathover,
        mouseout: pathout,
        scope: this
    }
};