PDA

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



kapilchhattani
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() {
Ext.MessageBox.show({
msg: 'Activating your account, please wait....',
progressText: 'Authenticating E-Mail address',
width: 300,
wait: true,
waitConfig: {interval: 200}
});
setTimeout(function() {
Ext.MessageBox.hide();
Ext.Msg.alert('Welcome', 'Your account has been activated, You can now login');
}, 8000);
});
</script>

troseberry
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?

kapilchhattani
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

troseberry
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

<style>
#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;
}
</style>


then inside your Ext.onReady



Ext.onReady(function () {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({
remove: true
});
});

kapilchhattani
25 Nov 2013, 1:30 PM
Appreciate it.