1. #1
    dddu88
    Guest

    Default callback function and scope

    callback function and scope


    Hi, all,
    I am experimenting ext 2.0 currently, still learning javascript, and having a problem basically related to javascript callback function, I tried all suggestions from the web and could not figure out a solution to the problem, I have a class function as following:

    Code:
      refreshProgress : function(){
               var cb = function(uploadInfo){
                      if (uploadInfo.inProgress)
                      {
                          alert(uploadInfo.bytesRead+':'+uploadInfo.totalSize);
                          var fileIndex = uploadInfo.fileIndex;
                          var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
                           this.progress.updateProgress(progressPercent,
                           'upload in progress: ' + progressPercent + '%'+'...');
                           window.setTimeout(this.refreshProgress, 1000);
                      }
              };
           //var callcb = cb.call(this, uploadInfo);          
                 
          UploadMonitor.getUploadInfo(cb);
              
              
      },
    the UploadMonitor.getUploadInfo(cb) is a dwr call, the cb is a callback function, which is gotten called in my testing, but the error is this.progress is not defined, which I know is not defined in thie scope of the callback function, it is in the scope of the class, my quesition is how can I make class level function call inside this callback function?

    I tried call(this, uploadInfo), apply(this, uploadInfo), they all got complained about the uploadInfo not defined, which is supposed to be returned by the getUploadInfo call.

    Any solutions?

    Thanks very much for your help.

    David

  2. #2
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default


    Code:
    UploadMonitor.getUploadInfo(cb.createDelegate(this));

  3. #3
    dddu88
    Guest

    Default


    Thanks for your response, it still said "this.progress has no preperty", do I need to other libraries for createDelegate function?

    The code:

    Code:
     
      refreshProgress : function(){
          //var self = this;
          //var cthis = this;
          var cb = function(uploadInfo){
                      if (uploadInfo.inProgress)
                      {
                          alert(uploadInfo.bytesRead+':'+uploadInfo.totalSize);
                          var fileIndex = uploadInfo.fileIndex;
                          var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
                          this.progress.updateProgress(progressPercent,
                           'upload in progress: ' + progressPercent + '%'+'...');
                           window.setTimeout(this.refreshProgress, 1000);
                      }
              };
           //var callcb = cb.call(this, uploadInfo);          
                 
          UploadMonitor.getUploadInfo(cb.createDelegate(this));
    
      },
    Thanks again.

    David

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    That's just a good ol' fashioned bug in your code.

    What is "this" at the point you call the DWR function? That is what the "this" will be in the callback. Its "progress" property is undefined. Just break there in Firebug and see what you're doing wrong.

  5. #5
    dddu88
    Guest

    Default


    Thanks for your advice, I found the 'this' in the call UploadMonitor.getUploadInfo(cb.createDelegate(this)) belongs to window instead of the my class which defines refreshProgress function, but in window scope, there is no progress property, progress is a property of my class, the call to refreshProgress() is the code:

    Code:
    window.setTimeout(this.refreshProgress, 1500);
    which resides in another class function, I donot know why this call changes the scope from my class to window, any idea how to fix?

    Thanks

    David

  6. #6
    dddu88
    Guest

    Default


    I got it working finally, this is the code inside my class function:

    Code:
    var refreshProgress = function(){
         
              var cb = function(uploadInfo){
                          if (uploadInfo.inProgress)
                          {
                              //alert(uploadInfo.bytesRead+':'+uploadInfo.totalSize);
                              var fileIndex = uploadInfo.fileIndex;
                              var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
                              this.progress.updateProgress(progressPercent,
                               'upload in progress: ' + progressPercent + '%'+'...');
                               window.setTimeout(refreshProgress.createDelegate(this), 1000);
                          }
                  };
               //var callcb = cb.call(this, uploadInfo);          
    
              UploadMonitor.getUploadInfo(cb.createDelegate(this));
    
          };
           window.setTimeout(refreshProgress.createDelegate(this), 1500);
    Thanks very much, this forum is so helpfull for a beginner like me.

    David

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Of course it "changes" the scope?

    There is absolutely no way for it to know what object to invoke the "refreshProgress" function with.

    Functions are passed as mere pointers.

    There is no scope information passed with them.

    You will need to use createDelegate to bind a scope to refreshProgress.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Correct!

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Except that's a great use case for the TaskMgr:

    Code:
    this.updateProgressTask = Ext.TaskMgr.start({
        run: this.refreshProgress,
        interval: 1000,
        scope: this
    });

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    And when you need to stop it:

    Code:
    Ext.TaskMgr.stop(this.updateProgressTask);

Thread Participants: 2