CODEWITHSUNDEEP
google-chromefirefoxextjstouchdrawer
hadi.ghasemian
hadi.ghasemian

Reputation: 157

sencha touch rect sprites do not appears on screen

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?

Upvotes: 0

Views: 84

Answers (1)

pankaj singh sisodiya
pankaj singh sisodiya

Reputation: 26

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

Upvotes: 1

Related Questions