Add labels to panel dynamically does not refresh panel

Question

I have the loop:

for (var key in myMap) {
                          if (myMap.hasOwnProperty(key)) {
                              propertiesPanel.add(new Ext.form.Label({
                                  text: key+':'+myMap[key]
                              }));
                              propertiesPanel.doLayout();

                          }
                        }

but if I have 500 keys in hashmap myMap, it will add all labels to panel, and in the end refresh process happens. But I want to see adding process gradually. How I can do it?

Answer 1

Instead of loop, try recursive function

addFields(500); //Adding 500 fields
fieldsAdded = 0
addFields = function(fieldCount) {
    propertiesPanel.add(new Ext.form.Label({
        text: 'Some text'
    }));
    propertiesPanel.doLayout();
    fieldsAdded++;
    if (fieldsAdded < fieldCount) {
        Ext.Function.defer(function() {
            addFields(fieldCount)
        }, 100, this);
    }
}