sencha touch rect sprites do not appears on screen

Question

i am implementing an application with sencha touch. cmd 6, touch 2.4, architect 3.0.0.1

i am using drawer component and i want to draw a rectangle sprite. firefox can show my rectangle but chrome do not and also when i transfer my app to apk... this is my code:

Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.draw.Component',

config: {
    border: 9,
    bottom: '',
    centered: false,
    cls: 'sa',
    draggable: true,
    fullscreen: true,
    id: 'd21',
    itemId: 's21',
    zIndex: 4,
    modal: false,
    sprites: [
        {
            zIndex: 30,
            type: 'rect',
            width: 100,
            height: 30,
            fill: 'red',
            stroke: 'black',
            fx: {
                duration: 0.00001,
                to: {
                    fill: '#00ff00'// Green
                }
            },
            translate: {
                x: 130,
                y: 115
            }
        },
        {
            type: 'text',
            fontSize: 18,
            fill: '#000',
            text: 0,
            textAlign: 'center',
            x: 90,
            y: 140
        }
    ]
}

});

what is the problem?

Answer 1

Please put this code in launch function. Because newer version of chrome some thing is broken in sencha touch. so you can put this code in app.js file in launch function.

May be it's solve your problem. You can check fiddle example in chrome. https://fiddle.sencha.com/#fiddle/rbp

Ext.override(Ext.util.SizeMonitor, {    
constructor: function(config) {
    var namespace = Ext.util.sizemonitor;
    if (Ext.browser.is.Firefox) {
        return new namespace.OverflowChange(config);
    } else if (Ext.browser.is.WebKit) {
        if (!Ext.browser.is.Silk && Ext.browser.engineVersion.gtEq('535') && !Ext.browser.engineVersion.ltEq('537.36')) {
            return new namespace.OverflowChange(config);
        } else {
            return new namespace.Scroll(config);
        }
    } else if (Ext.browser.is.IE11) {
        return new namespace.Scroll(config);
    } else {
        return new namespace.Scroll(config);
    }
}
});
Ext.override(Ext.util.PaintMonitor, {
constructor: function(config) {
    if (Ext.browser.is.Firefox || (Ext.browser.is.WebKit && Ext.browser.engineVersion.gtEq('536') && !Ext.browser.engineVersion.ltEq('537.36') && !Ext.os.is.Blackberry)) {
        return new Ext.util.paintmonitor.OverflowChange(config);
    } else {
        return new Ext.util.paintmonitor.CssAnimation(config);
    }
}
});