extjs flicker with Ext.Create, how do I avoid?

Question

With the below code when I refresh it (using Jetty/Chrome FYI) I see:

Hello World
Hello!!!

With the default css.

Then a delay and the "Click me" button appears, along with the referenced css. Any idea why? As you can see, myDiv is added immediately. If I comment out the onDocumentReady block then the page comes out immediately.

I assume its all the pulling in of extra js for the Ext button, but whatever the reason I'd like to know a good way of achieving a stable page refresh. I know I could have the body be diplay:none or visibility:hidden and turn it on at the end, but wondered if there is another, better way?

Thanks.

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
<script>
    var myDiv=Ext.DomHelper.append(Ext.getBody(), {tag: 'div', cls: 'new-div-cls', id: 'new-div-id',html:'Hello!!!'});

    Ext.onDocumentReady(function(){
    var button=Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            alert('You clicked the button!');
        }
    })
    })
</script>
</html>

Answer 1

Using Ext.onReady in place of Ext.onDocumentReady should do the trick but most Ext apps work best if Ext writes all of the content. Ext adds styles to the entire document when the JavaScript library loads.

Below the title tag, you can add a style tag that will prevent text from showing until Ext is loaded and applied.

In your html header:

<title>Hello Ext</title>

<style>
    body {
        color: #fff;
    }
</style>

In your existing script tag:

Ext.onReady(function(){
    var myDiv = Ext.DomHelper.append(Ext.getBody(), {
         tag: 'div', 
         cls: 'new-div-cls', 
         id: 'new-div-id',
         html:'Hello!!!'
    });

    var button = Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody()
    });

    button.on('click', function() {
        alert('You clicked the button!');
    });

})

extjs flicker with Ext.Create, how do I avoid?

Question

1 answers

solution1
2 ACCPTED 2012-09-18 18:54:58

extjs flicker with Ext.Create, how do I avoid?

Question

1 answers

solution1 2 ACCPTED 2012-09-18 18:54:58

solution1
2 ACCPTED 2012-09-18 18:54:58