Code example

var SortLayer = cc.Layer.extend({
    ctor: function()
    {
        this._super();

        this.scheduleUpdate();
    },

    _sprOrder:0,
    _graphCreated: false,


    update: function(dt)
    {
        var children = this.getChildren();
        var childCount = this.getChildrenCount();

        this._sprOrder = 0;

        for(var i=0; i < childCount; ++i)
        {
            var a_max = cc.p(1,1);

                if(!children[i].hasOwnProperty("spritesBehind"))
                {
                    children[i]["spritesBehind"] = new Array(childCount);
                    children[i].behindCount = 0;
                    children[i].visited = false;
                }

                for(var j=0; j < childCount; ++j)
                {
                    if(i!=j)
                    {
                        var b_min = cc.p();
;                        if(b_min.x < a_max.x && b_min.y > a_max.y)
                            children[i].spritesBehind[children[i].behindCount++] = children[j];
                    }
                }
            }


        for(var i=0; i < childCount; ++i) {
            this._visitSprite(children[i]);
        }

        for(var i=0; i < childCount; ++i) {
            children[i].visited = false;
        }

    },

    _visitSprite: function(spr)
    {
        if(!spr.visited)
        {
            spr.visited = true;

            var behindCount =  spr.behindCount;

            for(var i=0; i < behindCount; ++i)
            {
                if(!spr.spritesBehind[i])
                {
                    break;
                }
                else
                {
                    this._visitSprite(spr.spritesBehind[i]);

                        --spr.behindCount;
                        spr.spritesBehind[i] = null;

                }
            }

            spr.setLocalZOrder(this._sprOrder++);
        }
    }
});


var HelloWorldLayer = ccui.Layout.extend({
    _layout:null,
    ctor:function () {
        this._super();

        this.setContentSize(cc.director.getWinSize());

        var sort =  new SortLayer();

        this.addChild(sort);

        for(var  i =0 ; i < 10; ++i)
        {
            var img = new ccui.ImageView(res.HelloWorld_png);
            img.setScale(1/10);
            img.setPosition(cc.rand() % cc.director.getWinSize().width, cc.rand() % cc.director.getWinSize().height);
            sort.addChild(img);
        }

        var listView = new ccui.ListView();
        listView.setDirection(ccui.ScrollView.DIR_VERTICAL);

        this.addChild(listView);

        var layout =  new ccui.Layout();
        layout.setLayoutType(ccui.Layout.RELATIVE);
        layout.setBackGroundColorType(ccui.Layout.BG_COLOR_SOLID);
        layout.setBackGroundColor(cc.color(cc.rand()%255, cc.rand()%255, cc.rand()%255));

        layout.setContentSize(200, 200);

        var label =  new ccui.Text("Test Text", "Arial", 18);

        layout.addChild(label);

        listView.pushBackCustomItem(layout);

        var clonnedLayout = layout.clone();
        clonnedLayout.setBackGroundColor(cc.color(cc.rand()%255, cc.rand()%255, cc.rand()%255));
        listView.pushBackCustomItem(clonnedLayout);

        listView.setContentSize(200, 300);

        return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    ctor:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});