Technically its a problem with Ext.rtl.draw.Sprite but it affects the use of Ext.draw.Sprite.

The problem will not arise when Ext.draw.Component is configured with sprite definitions like those shown in the documentation. Instead it occurs if Ext.draw.Sprite instances are created independently and subsequently added to a surface instance.


This is the relevant part of the override in Ext.rtl.draw.Sprite:



Code:



    transformText: function(text) {
        var me = this;
        if (text && me.surface.isRtl && !Ext.isNumber(text) && me.rtlRe.test(text)) {
            // IE9m will display a strange visual artefact when showing
            // text with the RLM and there are no RTL characters in the string.
            // IE6 & 7 will still show the artefact, it seems to be unavoidable.
            return me.RLM + text;
        }
        return me.callParent(arguments);
    }

This is called during the Sprite constructor in response to a call to setAttributes(). If the Sprite is being created independently then me.surface is undefined leading to an exception when an attempts is made to test the isRtl property. When a sprite is created from a component configuration then the surface is available because the sprite is created by the surface instance createItem() function.

This override should be updated to add a check to ensure there is a valid surface before the isRtl property is used.


Assuming RTL is not important to you then in the meantime a workaround is to add an alternative object so the transformText function can be replaced:



Code:



Ext.define('Ext.my.draw.Sprite', {
    override: 'Ext.draw.Sprite',
    
    transformText: function(text) {
                return text;
    }    
});

This override function could fix the problem but my requirements don't need that.