PDA

View Full Version : Sencha-Touch loading web, transitory



ekaitza
20 Feb 2011, 6:41 AM
Hi all,

I've just started using sencha-touch and I hesitate if I am coding correctly. I’m obtaining a bad performance when loading (I’ve 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

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

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

});
}
});