ExtJS load progress

[SeaSharp2]

I looked at http://extjs.com/deploy/dev/examples/samples.html today and noticed a new ExtJS loading/initialize progress display. Is this a new Ext feature built into the framework and available to all?

[ApocalypseCow]

View source on the page and you'll see how (simply) it's achieved. ;)

[evant]

So simple it's almost cheating ;)

[Tranquoccuong]

See desktop sample :D

[SeaSharp2]

Ok, ok, all you JavaScript experts probably find it amusing that I even asked the question. One reason I use ExtJS is to limit the amount of web page design knowledge I need to retain in my brain. Having spent 15 minutes looking at the gallery page I get the idea now but I know it would take me another 30 minutes to work out which CSS declarations are needed as well.

The slow startup of a RIA web site is one of the well documented downsides of using a frameworks like Ext, so the framework should have some readymade support for a progress load dialog (all non intranet developers needs this).

Rather than 1000's of ExtJS developers spending the best part of an hour to code the effect themselves I suggest it would be better for an ExtJS core framework developer to knock something up to support the following usage pattern:



<script type="text/javascript" src="extprogressload.js"></script>

<script type="text/javascript">

loadPhase1 = [ "loadmsg 1", "ext-base.js", "ext-all.js" ]
loadPhase2 = [ "loadmsg two", "ext-all.css", "basicframev.jpg", "basicframeh.jpg"]
loadPhase3 = [ "nearly ready", "mybusslogic.js", "myframework.js" ]

Ext.ProgressLoad( loadPhase1, loadPhase2, loadPhase3 )

</script>

[tjstuart]

That would be awesome

[precariouspanther]

Actually - this has already been done for the most part a couple of weeks/months back. Check out:
http://extjs.com/forum/showthread.php?t=34808&highlight=demand

It also allows you to display loading indicators for all scripts your project uses as well as masking the application from user input whilst stuff is loading. Its designed to facilitate on demand loading but will quite easily wrap to your purposes.

Only caveat - you will need to load the ext core before page load rather than on demand as unfortunately Internet Explorer relies on some Document.Write calls which break after a page has been loaded.

You shouldn't have too much trouble massaging it into a simpler script that suits exactly your purposes :)

[luca.santaniello]

<script type="text/javascript" src="extprogressload.js"></script>

<script type="text/javascript">

loadPhase1 = [ "loadmsg 1", "ext-base.js", "ext-all.js" ]
loadPhase2 = [ "loadmsg two", "ext-all.css", "basicframev.jpg", "basicframeh.jpg"]
loadPhase3 = [ "nearly ready", "mybusslogic.js", "myframework.js" ]

Ext.ProgressLoad( loadPhase1, loadPhase2, loadPhase3 )

</script>

I want use this solution but Ext.ProgressLoad there is not defined into Ext library. I don't found extprogressload.js.

Help me please

Thanks

[joeri]

@luca: that code was an example of how some people would like it to work. To know how it actually works, look at the source code of the samples page.

[luca.santaniello]

@luca: that code was an example of how some people would like it to work. To know how it actually works, look at the source code of the samples page.

I see it but i don't understand... Can you post code please?

Thanks

[jay@moduscreate.com]

there is no fundamental difference between anyone posting code and you looking at the source for the docs.

[danguba]

This is how Ext done it. So I guess in your case it would be something like this...


<div id="loading">
<div class="loading-indicator"><img src="pathToSomeAnimatedGif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/><span id="loading-msg">loadmsg 1</span></div>
</div>

<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>

<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'loadmsg two';</script>

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'nearly ready';</script>

<script type="text/javascript" src="mybusslogic.js"></script>
<script type="text/javascript" src="myframework.js"></script>

[Mike Robinson]

Basic rules of etiquette always apply, and anyone who posts here ought to not "feel bad about" doing so. We all are ignorant about everything other than what we happen to not be (aware that we are ... :>) ignorant about. Heck, we certainly aren't here to poke fun at anyone who is now exactly where we ourselves have so recently been! ~o)

One issue of a "real progress-indicator" is that it's probably the host who is doing all the work, while we are (literally) twiddling our visual thumbs on the client-side. The progress indicator really is just there to keep the user from giving up and mashing the Reload Page button. 8-|

Sure, the host could provide a real "progress indicator," and some hosts do. But that involves "turning the line around" multiple times and this can be a lot more work ... for little practical benefit.