Results 1 to 3 of 3

Thread: Add Sprite issue in a class extended from 'Ext.fx.target.CompositeSprite'

    You found a bug! We've classified it as EXTJS-27606 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jul 2015
    Posts
    39
    Vote Rating
    1
      0  

    Default Add Sprite issue in a class extended from 'Ext.fx.target.CompositeSprite'

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


  2. #2
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    82
    Vote Rating
    -125
      -2  

    Default

    Hello Abdul,

    Thank you for bringing this to our notice., I have identified this to be a bug so I will register this in our bug tracker. The reference number will be attached here for you to track the progress of the issue.


    Regards,
    Kumar
    Sencha Support.

  3. #3
    Sencha Staff
    Join Date
    Sep 2017
    Posts
    124
    Vote Rating
    -97
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

Similar Threads

  1. [FIXED] Sprite Animation Redraw (Ext.fx.target.Sprite)
    By OhmzTech in forum Ext 5: Bugs
    Replies: 2
    Last Post: 27 Apr 2015, 7:50 PM
  2. Replies: 1
    Last Post: 14 May 2013, 9:07 AM
  3. Replies: 0
    Last Post: 24 Apr 2012, 12:24 PM
  4. Replies: 1
    Last Post: 21 Jun 2011, 6:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •