PDA

View Full Version : How to get Loading Image in Ajax Request



spizzico7
21 Jul 2010, 3:01 AM
Hi,
how set in the Ext.Ajax.request the loading image before success?

d2ncal
23 Jul 2010, 5:58 PM
You can create a popup and call it before the call:


showLoadingPopup = function() {
if (!this.loadingPopup) {
this.loadingPopup= new Ext.Panel({
floating: true,
modal: false,
centered: true,
width: 110,
height: 120,
styleHtmlContent: true,
html: '<img src="/img/loading.gif"><br/>Loading..',
scroll: 'vertical'
});
}
this.loadingPopup.show();
}


And then call the hide function in your callback / error handlers


hideLoadingPopup = function() {
if(this.loadingPopup) {
this.loadingPopup.hide('fade');
}
}

To make things easy, you can write a wrapper around Ext.Ajax.request that adds this automatically. For example:



AJAXWithLoadingPopup = function(params) {

old_handler = params.handler;
new_handler = function(args) {
hideLoadingPopup();
if(old_handler) {
old_handler(args);
}
}


showLoadingPopup();
Ext.Ajax.request(params)
}


Apparently, the non-sencha touch version of Ext has special events (beforerequest, completerquest, etc) that you can register for JSONP requests, which I couldn't find in sencha touch 0.91 (I am also very new to Ext / sencha, so if someone has a better way to do this, would love to find out about it).

tomalex0
27 Jul 2010, 10:30 AM
You could also try something like this


Ext.getBody().mask(false, '<div class="loading">Loading&hellip;</div>');

Ext.getBody().unmask();


.loading{
background:rgba(0, 0, 0, 0.3) url(../images/loading.gif) center center no-repeat;
display:block;
width:10em;
height:10em;
position:absolute;top:50%;
left:50%;margin-left:-5em;
margin-top:-5em;
-webkit-border-radius:.5em;
color:#fff;text-shadow:#000 0 1px 1px;
text-align:center;padding-top:8em;font-weight:bold;
z-index:10000000000;
}