View Full Version : Is there a way to render the Message Box before Ext.onReady is called.

24 Nov 2013, 8:52 PM
As you see in the below code that I have called a Message Box on my page, but unless I write it inside Ext.onReady is does not get rendered, is there a way that I can show the message Box first and remove it when the page is completely loaded.

<script type="text/javascript" src="ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript">

Ext.onReady(function() {
msg: 'Activating your account, please wait....',
progressText: 'Authenticating E-Mail address',
width: 300,
wait: true,
waitConfig: {interval: 200}
setTimeout(function() {
Ext.Msg.alert('Welcome', 'Your account has been activated, You can now login');
}, 8000);

25 Nov 2013, 7:04 AM
why not use some sort of loading mask effect (like the ExtJs Docs) instead and then when Ext.onReady remove the mask?

25 Nov 2013, 9:52 AM
Hey I am new to ExtJS, can you please elaborate a little bit more or provide me with an example of how to use the loading mask. Thanks in advance

25 Nov 2013, 12:57 PM
As an example for loading a new page. Set a couple divs in your html body

<div id="loading-mask"></div>
<div id="loading"></div>

then setup your css

#loading-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 20000;
background-color: #f5f5f5;
#loading {
position: absolute;
left: 45%;
top: 35%;
z-index: 20001;
height: 128px;
width: 128px;
background: url(../images/loading.gif) no-repeat;
text-align: center;
font-weight: bold;
font-size: 24px;
adding-top: 128px;

then inside your Ext.onReady

Ext.onReady(function () {
remove: true

25 Nov 2013, 1:30 PM
Appreciate it.