Saludos,

Hace algun tiempo publique un indicador global para ajax request en el foro ingles, ahora lo traigo para nuestro lenjuage y a consideracion de todos uds.

La idea es tener un indicador para identificar cuando el sistema esta haciendo una peticion ajax al servidor, es una caracteristica similar al indicador del explorador y es funcional en el caso por ejemplo de hacer uploadings a la BD automaticamente, yo lo utilizo en una grilla que tiene este sistema tal como en el ejemplo de mjlecomte: EditorGrid - working example (php/mysql backend) y fue inspirado en el indicador de digitalbucket.net por bahar

el indicador:

Código: Seleccionar todo

/**
* @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(this.counter == 0)
               this.showProgress();
           this.counter++;
       }, this);

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

       Ext.Ajax.on('requestexception', function(conn, response, o){
           this.counter--;   
           if(this.counter <= 0)
              this.hideProgress();
       }, this);
   },
   
   showProgress: function() {
       this.setIconClass('icon-indicator');
   },
   
   hideProgress: function() {
       this.setIconClass('icon-indicator-static');
   }
});

la utilizacion:

Código: Seleccionar todo

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

un buen recurso es : www.ajaxload.info

PD. hay un problema con el indicador y es el siguiente: si se envia una peticion ajax seguida inmediatamente de otra, la primera se cancela y pero el contador no se decrementa, no se porque. si alguien sabe y puede aportar algo para mejorarlo, porfavor hagalo.

Creo que tengo solucionado el problema de cuando se cancela una conexión.

agregar esto:

Código: Seleccionar todo

Ext.Ajax.addEvents({requestaborted:true});
Ext.override(Ext.data.Connection, {
abort : function(transId){
    if(transId || this.isLoading()){
        Ext.lib.Ajax.abort(transId || this.transId);
        this.fireEvent('requestaborted', this, this.transId);
    }
}});

y agregar el evento al indicador:

Código: Seleccionar todo

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

parece q ahora si funciona perfectamente.

espero sus pruebas y comentarios.

¿Puedes poner el código final, para ver con las modificaciones como quedan?

Saludos

Esto es perfecto! Detailes por los detalles! Excelente. Me encanta tu foros tanto! Esto es realmente una gran ayuda para nosotros ..