Posts Tagged ‘touch’

sencha loading icon before app startup screen

by on Thursday, May 9th, 2013

In the index.html,  add a div in the 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;
 <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');, 'fade', {
 easing: 'out',
 duration: 500,
 after: function() {

 xtype: 'loadmask',
 message: 'Please wait...'

Create some view here and call