Global loading indicator

[genius551v]

Hello,

This is just a little example of a global loading indicator to ajax request.



/**
* @class Ext.ux.indicator
* @extends Ext.Button
*/

Ext.ux.indicator = Ext.extend(Ext.Button, {
iconCls: 'icon-indicator-static',
disabled: true,
counter : 0,

initComponent : function() {
Ext.ux.AutoGridPanel.superclass.initComponent.call(this);

Ext.Ajax.on('beforerequest', function(conn, o){
//if(o.isUpload) return;
if(this.counter == 0)
this.showProgress();
++this.counter;
}, this);

Ext.Ajax.on('requestcomplete', function(conn, response, o){
//if(o.isUpload) return;
--this.counter;
if(this.counter <= 0)
this.hideProgress();
}, this);

Ext.Ajax.on('requestexception', function(conn, response, o){
alert('requestexception');
//if(o.isUpload) return;
--this.counter;
this.hideProgress();
}, this);
},

showProgress: function() {
this.setIconClass('icon-indicator');
},

hideProgress: function() {
this.setIconClass('icon-indicator-static');
},

handler : function() {
alert(this.counter);
}
});


implementation:


tbar: [{
text: 'Button1',
iconCls: 'icon1',
tooltip: 'This is a button1',
handler : YourHandlerFunction
},{
text: 'Button2',
iconCls: 'icon2',
tooltip: 'This is a button2',
handler : YourHandlerFunction
},
'->',
new Ext.ux.indicator()
],


Tnks to bahar in digitalbucket.net and www.ajaxload.info

(remenber change the path to the images for you configuration path)

your comments are wellcome...be nice please :D

[hendricd]

Nice.

How about a Qtip/Ext.Msg instead to show the counter value? (So the alert doesn't block script execution for the inquisitive mind ;) )

[Dumbledore]

Hi there,

it counts wrong if you make the same Ajax-Call twice. So for me i change the logic to capture the urls:



/**
* @class Ext.ux.indicator
* @extends Ext.Button
*/

Ext.ux.indicator = Ext.extend(Ext.Button, {
iconCls: 'icon-indicator-static',
disabled: true,
AjaxConnectionURLs : new Array(),

initComponent : function() {
Ext.ux.AutoGridPanel.superclass.initComponent.call(this);

Ext.Ajax.on('beforerequest', function(conn, o){
if (this.AjaxConnectionURLs.indexOf(o.url) == -1) {
this.AjaxConnectionURLs.push(o.url);
}
}, this);

Ext.Ajax.on('requestcomplete', function(conn, response, o){
this.AjaxConnectionURLs.remove(o.url);

if (this.AjaxConnectionURLs.length <= 0){
this.hideProgress();
}
}, this);

Ext.Ajax.on('requestexception', function(conn, response, o){
if (this.AjaxConnectionURLs.length <= 0){
this.hideProgress();
}
}, this);
},

showProgress: function() {
this.setIconClass('icon-indicator');
},

hideProgress: function() {
this.setIconClass('icon-indicator-static');
},

handler : function() {
alert(this.counter);
}
});