Question

I am trying to create a simple effect for my application which is to Fade it in from white over a period of 1-2 seconds so that the user doesn’t have to see it being assembled.

I almost have it working, but there is some flickering that I can’t seem to get rid of. Basically ExtJS is rendering my UI and then immediately hiding it so it can be faded in.

Here’s my app:

Ext.application({
    name : 'MyApp', // Application level namespace
    appFolder : 'js/myapp', // Directory path to app
    autoCreateViewport : true,

    launch : function() {    
        // fade in the viewport
        var form = Ext.ComponentQuery.query("viewport")[0];
        form.getEl().fadeIn({
            from : {
                opacity : 0
            },
            duration : 1000 
        });

    }
});

What can I do to get rid of the initial draw before the FadeIn?

Answer 1

Took a wild guess that I could set the opacity of the viewport to 0 by default and it worked:

Ext.define('MyApp.view.Viewport', {
    extend : 'Ext.container.Viewport',
    style: 'opacity: 0;',
    items : [ {
        xtype : 'someview'
    } ]
});