In Ext 6.5.x we started facing issue adding sprites in a class extended from 'Ext.fx.target.CompositeSprite'.
Getting error on that.add(.... statements at the end of constructor function. Code is given below.

This used to be working fine in Ext 5.x.x



Code:
Ext.define('TM.chart.RectSprite', {    extend: 'Ext.fx.target.CompositeSprite',
    alternateClassName : 'RectSprite',
    titleFont : '500 {0} "Times New Roman",Georgia,Serif',
    subFont : 'normal 12px Arial',
    title : 'Title',
    subTitle : 'Sub Title',
    opacity : 1,
    xcoord : 10,
    ycoord : 10,
    showTextAfter: false,
    textColor: '#000000',
    statics : {
        textThreshold: 5,
        clickFn: Ext.emptyFn,
        splitText : function (txt, width,pw) {
            pw = pw || 5;
            var hidden = false;
            var w = txt.length * pw;
            var ltxt = txt;
            if (width < w) {
                var c = txt.split(' ');
                var p = Math.floor(c.length / 2);                
                if (p > 0) {
                    c.splice(p, 0, '\r\n');
                }
                
                var text = c.join(' ');
                txt = text.replace(' \r\n ', '\r\n');
                var l = 0;
                c = txt.split('\r\n');
                Ext.each(c,function(item){
                  if(item.length > l){
                    l = item.length;
                    ltxt =item;
                  }
                });
            }
            hidden = RectSprite.isHidden(width,ltxt,pw);
            return [txt,hidden];
        },
        
        isHidden : function(width,txt,pw){
            return ((pw * txt.length) > width);
        
        },
        
    /**
     * Calculates the css font size, splits the text with line breaks if required     
     * and whether the text should be hidden or not.
     * @param {Number} width The width of the sprite to contain the text
     * @param {Number} config The height of the sprite to contain the text
     * @param {String} str Font string containing '{0}' which will be replaced with the calculated font size
     * @param {String} txt Text to be displayed
     * @return {Array} returns Array containing the font string, text to display and whether the text should be hidden or not
     */
        getFont : function (width, height, str, txt) {
            //calculater rough font size in px
            var f = Math.floor((width - 50) / 10);
            var l = txt.length;
            //check for maximum font size
            f = ((l < 16) && (f > this.textThreshold)) ? 25 : f;
            f = f > 25 ? 25 : f;
            f = f < 15 ? 15 : f;
            f = ((height < 100) && (f > 15)) ? 15 : f;
            var items = this.splitText(txt, width,7);
            
            return [str.replace('{0}', f + "px"), items[0],items[1]];
        },
        stopEvents : false,
        setOpacity : function (cmp, op, speed, callback) {
            var duration = speed || 500;
            var config = {
                to : {
                    opacity : op
                },
                duration : duration
            };
            if (callback) {
                config.callback = callback;
            }
            return cmp.animate(config);
        },
        fadeOutFn : function (cmp) {
            if (!this.stopEvents) {
                this.setOpacity(cmp, 0.2);
            }
        },
        fadeInFn : function (cmp) {
            if (!this.stopEvents) {
                this.setOpacity(cmp, 1);
            }
        }
    },
    constructor : function (config) {
        var that = this;
        that.callParent([config]);
        var xOff = 10;
        var yOff = 20;
        var xStart = that.initX || that.xcoord;
        var yStart = that.initY || that.ycoord;
        that.moveX = that.xcoord - xStart;
        that.moveY = that.ycoord - yStart;
        
        that.recSprite = Ext.create('Ext.draw.Sprite', {
                type : 'rect',
                width : that.width,
                height : that.height,
                x : xStart,
                y : yStart,
                opacity : that.opacity,
                startFill : '#00AA4B',
                fill : that.fill,
                costs : that.costs || 0,
                stroke : '#FFFFCC',
                "stroke-opacity" : 1,
                "stroke-width" : 1
                //surface : drawComponent.surface
            });
        
        var fontCalc = that.self.getFont(that.width, that.height, that.titleFont, that.title);
        var hideText = fontCalc[2];
        var hidden = hideText;
        var fontStr = fontCalc[0];
        var titleTxt = fontCalc[1];
        
        var subCalc = that.self.splitText(that.subTitle,that.width,7);
        var subText = subCalc[0];
        if(subCalc[1]){
            hideText = true;
            hidden = hideText;
        }
        
        
        if (that.showTextAfter){
            xStart = that.xcoord;
            yStart = that.ycoord;
            hidden = true;
        }
        that.titleMain = Ext.create('Ext.draw.Sprite', {
                type : 'text',
                "text-anchor" : "left",
                "text": ExtFormatNumberToCurrentLocale(titleTxt),
                font: fontStr,
                //style:'fill:'+that.textColor,
                fill : that.textColor,
                opacity : that.opacity,
                x : xStart + xOff,
                y : yStart + yOff,
                hidden : hidden,
                hideText: hideText,
                zIndex : 100,
                surface : that.surface
        });
        //that.titleMain.setStyle('fill', that.textColor);
        //that.recSprite.relayEvents(titleMain,['mouseover','mouseout','click']);
        that.titleMain.clearListeners();
        that.titleMain.show(true);




        
        var bbox = that.titleMain.getBBox();
        //that.titleMain.setStyle('fill', that.textColor);
    
        that.titleSub = Ext.create('Ext.draw.Sprite', {
                type : 'text',
                "text-anchor" : "left",
                "text" : subText,
                font: that.subFont,
                //style: 'fill:' + that.textColor,
                fill : that.textColor,
                opacity : that.opacity,
                x : xStart + xOff,
                y : bbox.y + bbox.height + 10,
                hidden : hidden,
                hideText: hideText,
                zIndex : 100
            });
        //that.recSprite.relayEvents(titleSub,['mouseover','mouseout','click']);
        
        that.add(that.recSprite);
        that.add(that.titleMain);
        that.add(that.titleSub);
        that.each(function (item) {
            that.surface.add(item);
        });
        
    },
    moveIn : function (duration, easing) {
        this.moveBy(this.moveX, this.moveY, duration, easing);
    },
    moveBy : function (x, y, duration, easing) {
        var that = this;
        var config = {
            duration : duration || 2000,
            easing : easing || 'ease'
        };
        if (!that.showTextAfter) {
            that.each(function (item) {
                config.to = {
                    x : item.x + x,
                    y : item.y + y,
                    opacity : 1
                };
                item.animate(config);
            });
        } else {
            var item = that.recSprite;
            var config2 = Ext.clone(config);
            config2.to = {
                x : item.x + x,
                y : item.y + y,
                opacity : 1
            }
            
            item.animate(config2);
        }
    },
    showText: function () {
                var that = this;
                
                if (that.items[1]. hideText === false){
                    RectSprite.setOpacity(that.titleMain.show(true),1,1000);
                    RectSprite.setOpacity(that.titleSub.show(true),1,1000);
                }
                
            }
    

});