How to display all callback results (formatted) at once

Question

I have a callback that sends data once they are ready (eg, an array of 5 names after I do a left-click). I want to display all the sent data to an Ext.Panel, but it gets only displayed in the Ext.Panel the last object of the array (eg, array goes from 1 to 5, and 1 to 4 appears really quick and in the end only 5 remains). Besides, I want to display these data by rows, and not like an array. How can I achieve that?

Code:

  trigger: function(e) {
    /* define some here */
    /*...*/
    $.ajax({
      /*...*/
      success: function(result){
        /*...*/
        var temp1 = 'name1';
        callback(temp1);
      }
    });
    $.ajax({
      /*...*/
      success: function(result){
        /*...*/
        var temp2 = 'name2';
        callback(temp2);
      }
    });
function callback(result){
    console.log('all results but they appear one by one here like: ' + result);

        var store = new Ext.Panel({
            html: result,
            border: false,
            bodyStyle: {
                'padding': '6px'
            },
            autoHeight: true
        });
};

Answer 1

Since you know hom many ajax requests you do (5), I suggest you to create a global variable wich will memorize the result of all your callback and insert into your panel once they are all loaded :

var myData = [];    

function callback(result){
    myData.push(result);
    if (myData.length == 5) {
          var store = new Ext.Panel({
              html: myDataFormated , // Here add some style by transforming myData array
              border: false,
              bodyStyle: {
                 'padding': '6px'
              },
              autoHeight: true
          });   
    }
};