How do I Dynamically adding a new Collapsed Panel to an Accordion in Ext?

Question

I have an Accordion in ExtJS and I want to add new Panels to it dynamically. The Panels need to be collapsed when they appear. The code that I have now will create the Panels, but the HTML in each panel won't show.

var loadoutput = new Ext.Panel({
 title: 'Log',
 renderTo: 'logout',
 layout: 'accordion',
 defaults: {
  bodyStyle: 'padding:10px',
  collapsed: true
 },
 layoutConfig: {
  fill: true,
  animate: true
 }
});

function logOutput(_title, _html) {
 temp = new Ext.Panel();
 temp.title = _title;
 temp.html = _html;
 temp.collapsed = true;
 loadoutput.items.add(temp);
 loadoutput.doLayout();
}

 logOutput("Well, that was interesting", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
 logOutput("Hello", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
 logOutput("What?", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
 logOutput("Cat", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");

Answer 1

I think the problem is that you are using the "items" add method (it's a Ext.util.MixedCollection) instead of the Ext.Panel add method.

Try this:

loadoutput.add(temp);

Answer 2

So, this code works above. items.add or add both work. One issue is boxMinHeight. Need to set it manually I guess.