In the index.html, add a div in the body:
[html]
<body>
<style type="text/css">
#loading-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(resources/img/indicator.gif) no-repeat;
text-align: center;
}
</style>
<div id="loading-mask"></div>
<script type="text/javascript" src="app.js"></script>
[/html]
In app.js, in the launch function, once all the app initialization is finished I remove the load mask with a fade animation:
[code]
if (Ext.get(‘loading’)) {
var loadmask = Ext.get(‘loading’);
Ext.Anim.run(loadmask, ‘fade’, {
easing: ‘out’,
duration: 500,
after: function() {
Ext.get(‘loading’).remove();
}
});
}
Ext.Viewport.setMasked({
xtype: ‘loadmask’,
message: ‘Please wait…’
});
Create some view here and call
Ext.Viewport.setMasked(null);
[/code]