problem with callback function in javascript using extjs

Question

My callback code (js file) is something like

function addcontent(Title, tUrl, bURL, Id,purl){

  alert(Id)

  var runcontent = new Ext.Panel({
    id: 'tt' + Id,
    region: 'center',
    autoLoad: {
      url: tUrl, 
      callback: function(el){
        addwindow(el, Id, bURL,purl);
      }, 
      scripts: true, 
      nocache: true
    },
    width: 600,
    collapsible: false
  });
}

function addwindow(el, Id, bURL,purl) {

  //alert(el);
  alert("add buttons   " +{Id);
}

My problem is the call function is not going to addwindow. When I alert “Id” in addcontent it is displaying but not addwindow as the control is not moving to addwindow. How can I trace/track what is the exception which is preventing the control to move onto addwindow.?

Answer 1

function addcontent(Title, tUrl, bURL, Id,purl){

  alert(Id)

  var runcontent = new Ext.Panel({
    id: 'tt' + Id,
    region: 'center',
    autoLoad: {
      url: tUrl, 
      callback: addwindow(Id, bURL,purl),
      scripts: true, 
      nocache: true
    },
    width: 600,
    collapsible: false
  });
}

function addwindow(Id, bURL,purl) {

  //alert(el);
  alert("add buttons   " +Id);
} 

Answer 2

The proper approach to creating the callback with params is to use createCallback or createDelegate. Your functions are (apparently) executing in global scope so it wouldn't make much practical difference, but createDelegate allows your callback to execute within the same scope as the original function, which makes it the best default choice usually. So it would be something like:

autoLoad: {
  url: tUrl, 
  callback: addwindow.createDelegate(this, [Id, bURL,purl]),
  scripts: true, 
  nocache: true
},

Again, note that the this in your case will be the global Window object, but this is still a good practice to get into so that doing the same thing in the future within a class method will work as expected.