sencha loading icon before app startup screen

by admin on May 9th, 2013

In the index.html,  add a div in the body:


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

 

In app.js, in the launch function, once all the app initialization is finished I remove the load mask with a fade animation:


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);

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>