JSAPI - how to add a graphic on top of another graphic in the same layer?

Question

I have a graphics layer and I'd like to add a graphic behind the existing graphics. I've come up with this:

graphicsLayer.add(overlay.graphic);
graphicsLayer.graphics.unshift(graphicsLayer.graphics.pop());

But I have to pan the markers off the screen and then pan them back into view before the 'unshift'-ed graphics display correctly. I've tried calling refresh without any affect:

graphicsLayer.refresh();

How can this be done without introducing a second graphics layer?

Answer 1

Graphics in a GraphicsLayer (as well as in a FeatureLayer) are dojx.gfx objects. Each Graphic has a getDojoShape method. This is the key to changing the drawing order of your graphics.

I put up a working example on jsfiddle: http://jsfiddle.net/fKwRn/

Click the map to add a point. The newest point is always added underneath the existing points.

Answer 2

My goodness I hope this is not the correct "answer":

graphicsLayer.acme = {
    addFirst: function (graphic)
    {
        graphicsLayer.graphics.unshift(graphic);
        graphic._graphicsLayer = graphicsLayer;
        graphicsLayer._updateExtent(graphic);
        graphicsLayer.onGraphicAdd(graphic);
    },
    redraw: function ()
    {
        var graphics = dojo.filter(graphicsLayer.graphics, function (item)
        {
            return item.visible;
        });
        dojo.forEach(graphics, function (item)
        {
            graphicsLayer.remove ( item );
        });
        dojo.forEach(graphics, function (item)
        {
            graphicsLayer.add(item);
        });
    }
};

I introduced an addFirst method to add the graphic to the front of the graphics array and a redraw method to remove all visible graphics from the layer and add them back to the layer. That can't be good.