Hi,
I am trying to create nested TabNavigators which are built dynamically from
server data. The top TabNavigator is static. Its children are created by a
Repeater. Within each Repeater's child (VBox), another TabNavigator is
created, and a second Repeater creates the children of the TabNavigator.
This is a revision of a old application, so it's using a 3.6 SDK.
The top level tabs represent types of Documents. The second level of tabs
represent subtypes. And each time this area is accessed, there will be
different trees of types/subtype/documents.
The process throws an error intermittently as the elements are created:
RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/getChildAt()
at
mx.core::Container/getChildAt()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\core\Container.as:2377]
at
mx.controls::ToggleButtonBar/hiliteSelectedNavItem()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\controls\ToggleButtonBar.as:441]
at
mx.controls::ToggleButtonBar/updateDisplayList()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\controls\ToggleButtonBar.as:364]
at
mx.core::UIComponent/validateDisplayList()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\core\UIComponent.as:6510]
at
mx.core::Container/validateDisplayList()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\core\Container.as:2720]
at
mx.managers::LayoutManager/validateDisplayList()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:622]
at
mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:677]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at
mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8892]
at
mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8832]
Since the error reference is to getChildAt(), and before that, to
hiliteSelectedNavItem, I assume that the error is coming as the framework
tries to select a tab that does not exist. But I have no clue what to do
about it.
Here is the opening MXML:
<mx:TabNavigator id="docTabs" width="100%" height="100%" x="5" y="5"
backgroundAlpha="0.0" borderThickness="1" paddingTop="0"
creationPolicy="all">
<mx:Repeater id="docTypes" dataProvider="{acCaseDocuments}"
recycleChildren="false">
<mx:VBox id="docType" horizontalAlign="center"
label="{docTypes.currentItem.friendlyName}" height="95%" width="95%"
styleName="contentWhite">
<mx:TabNavigator id="docSubtabs" width="100%"
height="100%" x="5" y="5" backgroundAlpha="0.0" borderThickness="1"
paddingTop="0" creationPolicy="all">
<mx:Repeater id="docSubtypes"
dataProvider="{docTypes.currentItem.subtypes}" recycleChildren="false">
<mx:VBox id="docSubtype" horizontalAlign="center"
label="{docSubtypes.currentItem.friendlyName}" height="95%" width="95%"
styleName="contentWhite">
I have also tried creating the elements in ActionScript, to bypass the
Repeater action. This results in no errors. Both levels of tabs appear to
be created properly (by "appear," I mean "visually.") However, when a tab
on the second level (the subtypes) is clicked, rather than the selected
chlid appearing, the user is switched to an entirely different screen -
completely away from the Documents area.
I don't know why the click is taking me away from the screen, but as I walk
through the debugging, it appears that while the TabNavigator children are
created correctly, the children of its associated TabBar are not. Here's
the ActionScript, which is fired by a CollectionChangeEvent listener on the
ArrayCollection which contains the Document data:
private function buildUI(e:CollectionEvent):void{
clearTabs();
for(var i:int=0;i<acCaseDocuments.length;i++){
var arSubtypes:Array = acCaseDocuments[i].subtypes as
Array;
var vb:VBox = new VBox();
vb.id='docType' + i;
vb.setStyle('horizontalAlign','center');
vb.label = acCaseDocuments[i].friendlyName as String;
vb.percentWidth=95;
vb.percentHeight=95;
vb.styleName='contentWhite';
var tn:TabNavigator = new TabNavigator();
tn.id='docSubtab' + i;
tn.percentWidth=100;
tn.percentHeight=100;
tn.x=5;
tn.y=5;
tn.setStyle("backgroundAlpha",0);
tn.setStyle('borderThickness',1);
tn.setStyle('paddingTop',0);
for(var j:int=0;j<arSubtypes.length;j++){
var ddg:DocDataGrid = new DocDataGrid();
ddg.id= 'docSubtype' + j;
ddg.label=arSubtypes[j].friendlyName as String;
ddg.percentWidth=95;
ddg.percentHeight=95;
ddg.gridData.source=arSubtypes[j].documents as
Array;
ddg.gridData.refresh();
tn.addChild(ddg);;
}
vb.addChild(tn);
docTabs.addChild(vb);
}
}
The "DocDataGrid" reference is simply a custom component that is a Box
containing a DataGrid.
Sorry for the lengthy post, but I wanted to make sure that the problem was
described thoroughly before I asked anyone for help.
Any thoughts on the issue would be greatly appreciated.
--
Thanks,
Tom
Tom McNeer
MediumCool
http://www.mediumcool.com
1735 Johnson Road NE
Atlanta, GA 30306
404.589.0560
