Home/ Questions/Q 8548109
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:25:07+00:00

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

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

})
    • 0