PDA

View Full Version : Preloader including external CSS files



sir_holmes
13 May 2012, 7:08 AM
Hi, I am currently working on a simple preloader for my ext js application (MVC). I want all external files to be loaded - JS and CSS. Until the files are loaded, a loading mask is visible.
Preloading all ext js files works, in the app.js the loading mask is removed in Ext.onReady. But how do I check if the external CSS files are completely loaded (ext-all-gray.css and interface.css)?

Thanks!

index file


<head>
<link rel="stylesheet" href="css/ext-all-gray.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/interface.css" type="text/css" media="screen, projection" />
<style type="text/css">
#loadingMask {...}
#loadingLayer {...}
#loadingcontent {...}
#loadingcontent SPAN {...}
#loadingcontent SPAN.loadingMessage { ...}
</style>
</head>
<body>
<div id="loadingMask"></div><div id="loadingLayer"><div id="loadingcontent"><span><img src="images/loader.gif"></span><span class="loadingMessage">Loading carabids.org...</span></div></div>

<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="clientside/locale/ext-lang-en.js"></script>
<script type="text/javascript" src="app.js"></script>
...
</body>


app.js


Ext.onReady(function(){
Ext.get('loadingMask').fadeOut({ duration: 0.2, remove: true });
Ext.get('loadingLayer').fadeOut({ duration: 0.2, remove: true });
});
...

scottmartin
14 May 2012, 8:25 AM
You are working on a loader, but you are calling ext-all*?

You may want to have a look at Ext.Loader() that handles of this for you when using MVC config.

Regards,
Scott.