Why the the whole page disappeared after I insert or add components to another ?

[bubble8426]

Why the the whole page disappeared after I insert or add components to another ?
I have encountered this problem many times. And the reason the page disappear is that the height of dom elements become zero. If I reset their height in firebug one by one, they will show up again, including the new components I inserted/added.

Now, I am suffering from the same problem again.
I load several comments into a comment container as following:

commentStore.load({
callback:function(store){
Ext.suspendLayouts();

Ext.each(store, function(record){
var comment = Ext.getCmp('commentContainer').add({
xtype:'comment'
});
//Set the contents, user photo etc. to the comment
//It will add new items to the comment.
});

Ext.resumeLayouts(true);
}
});

The comment container:

{
xtype:'container',
defaults:{
    flex:1
},
layout:{
    type:'vbox',
    align:'center',
    padding:10
}
}

The only way to prevent the problem is to give the container a specific height.
But I hope it can resize to the contents automatically.
I try to set autoHeight to true, but it's not working.
Can anybody help?

[bubble8426]

Sorry, I don't know how to increase the height of the code region. The code below maybe more readable.

comment loading:

commentStore.load({

callback:function(store){

Ext.suspendLayouts();

Ext.each(store, function(record){

var comment = Ext.getCmp('commentContainer').add({

xtype:'comment'

});

//Set the contents, user photo etc. to the comment

//It will add new items to the comment.
});

Ext.resumeLayouts(true);

}

});

comment container:

{

xtype:'container',

defaults:{

flex:1

},

layout:{

type:'vbox',
align:'center',

padding:10

}

}