sencha touch rect 精灵不出现在屏幕上

Question

我正在使用 sencha touch 实现一个应用程序。 cmd 6，touch 2.4，架构师 3.0.0.1

我正在使用抽屉组件，我想绘制一个矩形精灵。 firefox 可以显示我的矩形，但是 chrome 不能，而且当我将我的应用程序转移到 apk 时... 这是我的代码：

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
        }
    ]
}

});

有什么问题？

Answer 1

请将此代码放入启动函数中。因为较新版本的 chrome 一些东西在 sencha touch 中被破坏了。所以你可以把这段代码放在启动函数的 app.js 文件中。

也许它能解决您的问题。您可以查看 chrome 中的 fiddle 示例。 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);
    }
}
});

sencha touch rect 精灵不出现在屏幕上

sencha touch rect sprites do not appears on screen

firefox

google-chrome

extjs

touch

drawer