extjs - 如何在鼠标悬停时将 Extjs 4 绘制组件精灵带到顶部？

Question

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

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

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

Answer 2

这也是可能的，而不是重新添加。

                var marker = Ext.create('Ext.draw.Sprite',{
                    type: 'circle',
                    fill: 'red',
                    surface : me.surface,
                    radius: 2,
                    x : sprite.x,
                    y : sprite.y
                });

                marker.show(true);