Hi all,

I've just started using sencha-touch and I hesitate if I am coding correctly. Im obtaining a bad performance when loading (Ive tested it only on iphone).

Eg:
My website items (background image, toolbar) are appearing in saphari mobile step by step and quite slow on a remote connection even setting the phoneStartupScreen in Ext.setup.

Is my index.js and index.html files well coded for a good performance?

Is there any kind of loader or solution to prevent that poor performance in the transitory period?

Thank you very much,
Do forgive my English



index.html
Code:
<!DOCTYPE html>
 <html>
 	<head>
    	 <meta charset="utf-8">
   		 <title>GeoTweets</title>

		 <!-- Sencha Touch CSS -->
		 <link rel="stylesheet" href="lib/touch/resources/css/android.css" type="text/css">

		 <!-- Custom CSS
		 <link rel="stylesheet" href="my.css" type="text/css">
		 -->
         
		 <!-- Sencha Touch JS -->
		 <script type="text/javascript" src="lib/touch/sencha-touch.js"></script>

		 <!-- Application JS -->
		 <script type="text/javascript" src="index.js"></script>

 	
	<style>
		body, .x-fullscreen{
			background: url('testbackground.png') !important;
		}
	</style>
    </head>
<body>

<!-- MENU ONMATCH -->
  <div style="display: none;">
    <div id="menu_onmatch">
		<!-- CONTINGUTS MENU ONMATCH -->
		menu
     </div>
   	 
	<!-- FI MENU -->

	<div id="desktop_onmatch">
	</div>


	<div id="logo_onmatch">
		<IMG SRC="logo.png">
	</div>

	<div id="onmatch_loader">
		<IMG SRC="ajax-loader.gif">
	</div>
</div>
 
</body>
</html>


index.js
Code:
Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    onReady: function() {
		console.log("Entrem a la part del ready");
		//FINESTRA DEL MENU
        var overlayTb = new Ext.Toolbar({
            dock: 'top'
        });
        
        var overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
            width: Ext.is.Phone ? 260 : 400,
            height: Ext.is.Phone ? 250 : 400,
            styleHtmlContent: true,
            
           
            contentEl: 'menu_onmatch', //div que em de carregar en aquest cas al menu
            cls: 'htmlcontent'
        });
		
        //HANDLER BOTO MENU
        var showCenteredOverlay = function(btn, event) {
            overlay.setCentered(true);
            overlayTb.setTitle('Centered Overlay');
            overlay.show();
        };
		
		//BOTO MENU
		var logo= [{xtype:'box', el:'logo_onmatch', autoShow:true }];
		var loading= [{id:'onmatch_loader', xtype:'box', el:'onmatch_loader', autoShow:true }];
		var boto_menu = [
			{ xtype: 'spacer' },
			{ ui: 'normal', text: '+', handler: showCenteredOverlay  }
		];
		
		
	 
		//ITEMS PANELL GENERAL
        var dockedItems = [{
            dock: 'top',
            xtype: 'toolbar',
            items: [logo,loading,boto_menu ]  
        }];
		
	
		
		//PANELL GENERAL
        var general = new Ext.Panel({
            fullscreen: true,
			scroll: 'vertical',
			ui: 'green',
			contentEl: 'desktop_onmatch',
			
            dockedItems: dockedItems
            
        });
    }
});