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:


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