Dynamically adding container to a dynamic container - apache-flex

Question

I have a loop that goes through data from a book and displays it. The book is not consistent in it's layout so I am trying to display it in two different ways. First way(works fine) is to load the text from that section in to a panel and display it. The second way is to create a new panel (panel creates fine) and then add collapsable panels(nested) to that panel. Here is the code from the else loop.
else if (newPanel == false){
// simpleData is just for the title bar of the new panel
// otherwise the panel has no content
var simpleData:Section = new Section;
simpleData.section_letter = item.section_letter;
simpleData.letter_title = item.letter_title;
simpleData.section_id = item.section_id;
simpleData.title = item.title;
simpleData.bookmark = item.bookmark;
simpleData.read_section = item.read_section;
var display2:readPanel02 = new readPanel02;
//item is all the data for the new text
display2.id = "panel"+item.section_id;
//trace(display2.name);//trace works fine
// set vars is how I pass in the data to the panel
display2.setVars(simpleData);
studyArea.addElement(display2); // displays fine
newPanel = true;
//this is where it fails
var ssPanel:subSectionPanel = new subSectionPanel;
//function to pass in the vars to the new panel
ssPanel.setSSVars(item);
//this.studyArea[newPanelName].addElement(ssPanel);
this["panel"+item.section_id].addElement(ssPanel);
The error I get is: ReferenceError: Error #1069: Property panel4.4 not found on components.readTest and there is no default value.
I have tried setting the "name" property instead of the "id" property. Any help would be greatly appreciated. I am stumped. Thanks.

Answer 1

So here is the solution I came up with. I made the new readPanel create the sub panels. I added the else statement to help it make more sense. The readPanel creates the first sub panel, and for every subsequent need of a sub panel it references the other panel by name and calls the public function in the panel that creates the new sub panel. Here's the code to create the main panel:
else if (newPanel == false){
var display2:readPanel02 = new readPanel02;
studyArea.addElement(display2);
display2.name = "panel"+item.section_id;
display2.setVars(item);
newPanel = true;
}
else{
var myPanel:readPanel02 = studyArea.getChildByName("panel"+item.section_id) as readPanel02;
myPanel.addSubSection(item);
}
And here is the functions in the panel:
public function setVars(data:Section):void
{
myS = data;
textLetter = myS.section_letter;
textLetterTitle = myS.letter_title;
textSection = myS.section_id;
textTitle = myS.title;
myS.bookmark == 0 ? bookmarked = false : bookmarked = true;
myS.read_section == 0 ? doneRead = false : doneRead = true;
showTagIcon();
showReadIcon();
addSubSection(myS);
}
public function addSubSection(data:Section):void{
var ssPanel:subSectionPanel = new subSectionPanel;
ssPanel.setSSVars(data);
myContentGroup.addElementAt(ssPanel, i);
i++;
}