[Extjs6] Ext.draw.Container 添加sprite并添加spriteevents事件处理函数

Ext.define("Admin.view.xxxxxx",{
    extend: "Ext.draw.Container",
    xtype: "smartdispatchlinestation",

    requires: [
        "Ext.draw.Component",
        "Ext.draw.plugin.SpriteEvents"
    ],
    width: "100%",
    height: 400,
    plugins: ["spriteevents"],
    fromtype: 1,  //用于业务区分  js中可以自定义添加一些额外的属性 以方便业务的处理
    sprites: [],

    initComponent:function(){
        var draw = this,
            surface = draw.getSurface();
        var drawItems = [];
        //添加初始化的车点
        var topCarNo = Ext.Number.randomInt(1000,2000);
        var topCarX = 750,  //200
            topCarY = 100;  //200
        var topCarSprite = {
            type: "path",
            data: topCarNo,
            cls: topCarX+"-"+topCarY,
            id: "topcar",  //定义ID  为了后面方便获取
            path: "M"+topCarX+","+topCarY+"L"+topCarX+","+(topCarY-10)+" L"+(topCarX+10)+","+topCarY+" L"+topCarX+","+(topCarY+10)+" L"+topCarX+","+topCarY,
            strokeStyle: "rgb("+Ext.Number.randomInt(50,200)+","+Ext.Number.randomInt(50,200)+","+Ext.Number.randomInt(50,200)+")",
            lineDashOffset: 1,
            lineWidth: 6,
            animation: {
                duration: 1000,
                easing: "elasticOut"
            }
        };
        var topCarSpriteText = {
            type: "text",
            id: "topcartext",
            x: topCarX - 10,
            y: topCarY + 30,
            text: topCarNo,
            //text: "",
            fontSize: 15,
            fillStyle: "red"
        }
        drawItems.push(topCarSprite);
        drawItems.push(topCarSpriteText);
        //surface.add(topCarSprite); //绘制到图形上
        //surface.add(topCarSpriteText);
        surface.add(drawItems);

        //根据ID获取指定的sprite
        topCarSprite = surface.get("topcar");
        topCarSpriteText = surface.get("topcartext");
        var id1 = setInterval(function(){
            var xy = topCarSprite.cls;    // xy为 x-y
            var xyArray = xy.split("-");
            //var t = xyArray[0]-200 > 0? xyArray[0]-200:600;
            var t = xyArray[0]-200;
            topCarX = 200+((t+50)%600);
            topCarSprite.cls = topCarX+"-"+xyArray[1];
            //console.log("topCarSprite: "+ topCarSprite.cls);
            topCarSprite.setAttributes({
                path:"M"+topCarX+","+topCarY+"L"+topCarX+","+(topCarY-10)+" L"+(topCarX+10)+","+topCarY+" L"+topCarX+","+(topCarY+10)+" L"+topCarX+","+topCarY
            });
            topCarSpriteText.setAttributes({
                x:topCarX - 10,
                y:topCarY + 30
            });
            surface.renderFrame();
        },1000);
        draw.callParent(arguments);
    },
    listeners:{
        spriteclick:function(item, event){
            var sprite = item && item.sprite;
            if(sprite.type == "circle")
            {
                //绘制图片
                var draw = this,
                    surface = draw.getSurface();
                var cx = sprite.cx,
                    cy = 0,
                    heightPic = 200,
                    widthPic = 200;
                if(sprite.cy < 150)
                    cy = sprite.cy;
                else
                    cy = sprite.cy - heightPic;
                var pic = Ext.create("Ext.draw.sprite.Image",{
                    src: Ext.getResourcePath("images/img"+Ext.Number.randomInt(1,4)+".jpg"),
                    x: cx,
                    y: cy,
                    height: heightPic,
                    width: widthPic,
                    fx:{
                        duration:300,
                        easing: "bounceOut"
                    }
                });
                surface.add(pic);
                setTimeout(function(){
                    pic.destroy();
                },2000);
            }
            else if(sprite.type == "path"){
                alert(sprite.data);
            }
            console.log("spriteclick....");
            console.log(sprite);
        }
    }
});