Flex Datagrid + Tab Navigator - apache-flex

Question

I have a several datagrids (with data being retrieved from some map service).
I want to place these data grids within seperate tabs of a tab navigator. All works fine apart from the first tab which always ends up without any datagrid in it.
I have tried creation policy="all" and stuff but the first tab always is empty. Does anybody have any ideas as to why the first tab is always empty.
Any workarounds.
Thanks
var box:HBox=new HBox();
var dg:DataGrid = new DataGrid();
dg.dataProvider = newAC;
box.label=title.text;
box.addChild(dg);
tabNaviId.addChild(box);
tabNaviId.selectedIndex=2;
resultsArea.addChild(tabNaviId);
dg is datagrid that is being filled up. The above code is in a loop, in each loop i am creating an Hbox+datagrid. then i am adding the Hbox to the navigator and final adding the navigator to resultsArea (which is a canvas).
The above code works great apart from first time.
The end result i get is, having a tab navigator with first tab without any datagrid but the remaining tabs all have the datagrids. Any ideas as to why this is happening.
Call to a function called createDatagrid is made:
dgCollection.addItem(parentApplication.resultsPanel.createDatagrid( token.name.toString() + " (" + recAC.length + " selected)", recAC, false, callsToMake ));
In another Mxml component this function exists
public function createDatagrid(titleText:String, recACAll:ArrayCollection, showContent:Boolean, callsToMake:Number):DataGrid
{
var dg:DataGrid = new DataGrid();
var newAC:ArrayCollection = new ArrayCollection();
var newDGCols:Array = new Array();
for( var i:Number = 0; i < recACAll.length; i ++)
{
var contentStr:String = recACAll[i][CONTENT_FIELD];
var featureGeo:Geometry = recACAll[i][GEOMETRY_FIELD];
var iconPath:String = recACAll[i][ICON_FIELD];
var linkStr:String = recACAll[i][LINK_FIELD];
var linkNameStr:String = recACAll[i][LINK_NAME_FIELD];
var featurePoint:MapPoint = recACAll[i][POINT_FIELD];
var titleStr:String = recACAll[i][TITLE_FIELD];
if( contentStr.length > 0)
{
var rows:Array = contentStr.split("\n");
var tmpObj:Object = new Object();
if(!showContent)
{
for( var j:Number = 0; j < rows.length; j++)
{
var tmpStr:String = rows[j] as String;
var header:String = tmpStr.substring(0,tmpStr.indexOf(":"));
var val:String = tmpStr.substring(tmpStr.indexOf(":") + 2);
if(header.length > 0)
{
tmpObj[header] = val;
if(newDGCols.length < rows.length - 1)
{
newDGCols.push( new DataGridColumn(header));
}
}
}
}
else
{
if(newDGCols.length == 0)
{
newDGCols.push(new DataGridColumn(CONTENT_FIELD));
newDGCols.push(new DataGridColumn(GEOMETRY_FIELD));
newDGCols.push(new DataGridColumn(ICON_FIELD));
newDGCols.push(new DataGridColumn(LINK_FIELD));
newDGCols.push(new DataGridColumn(LINK_NAME_FIELD));
newDGCols.push(new DataGridColumn(POINT_FIELD));
newDGCols.push(new DataGridColumn(TITLE_FIELD));
}
}
tmpObj[CONTENT_FIELD] = contentStr;
tmpObj[GEOMETRY_FIELD] = featureGeo;
tmpObj[ICON_FIELD] = iconPath;
tmpObj[LINK_FIELD] = linkStr;
tmpObj[LINK_NAME_FIELD] = linkNameStr;
tmpObj[POINT_FIELD] = featurePoint;
tmpObj[TITLE_FIELD] = titleStr;
newAC.addItem(tmpObj);
}
if( showHidePic.source == minSourceI )
{
showHidePic.source = minSource;
}
else if( showHidePic.source == maxSourceI )
{
showHidePic.source = maxSource;
}
curResults = curResults + recACAll.length;
if (curResults == 1)
{
showInfoWindow(tmpObj);
if(showContent)
{
parentApplication.maps.map.extent = featureGeo.extent;
}
}
else
{
showInfoWindow(null);
// Added to avoid the overview button problem (needs checking)
this.removeEventListener(MouseEvent.MOUSE_OVER, handleMouseOver, false);
this.removeEventListener(MouseEvent.MOUSE_MOVE,handleMouseOver,false);
this.removeEventListener(MouseEvent.MOUSE_OUT,handleMouseOut,false);
this.removeEventListener(MouseEvent.MOUSE_DOWN,handleMouseDrag,false);
this.removeEventListener(MouseEvent.MOUSE_UP,handleMouseDragStop,false);
this.parent.removeEventListener(MouseEvent.MOUSE_MOVE,handleParentMove,false);
this.parent.removeEventListener(MouseEvent.MOUSE_UP,handleMouseDragStop2,false);
maximizePanel();
}
}
dg.dataProvider = newAC;
dg.columns = newDGCols;
dg.rowCount = newAC.length;
var totalDGCWidth:Number = 0;
for( var m:Number = 0; m < dg.columns.length; m++)
{
var dgc2:DataGridColumn = dg.columns[m];
/*if(dgc2.headerText.toUpperCase()==LINK_FIELD.toUpperCase()){
//dgc.itemRenderer=new ClassFactory(CustomRenderer);
dgc2.itemRenderer=new ClassFactory(CustomRenderer);
}*/
var dgcWidth2:Number = dgc2.headerText.length * CHAR_LENGTH;
for( var l:Number = 0; l < newAC.length; l++)
{
var row2:Object = newAC.getItemAt(l) as Object;
var rowVal2:String = row2[dgc2.headerText];
if( rowVal2 != null)
{
var tmpLength2:Number = rowVal2.length * CHAR_LENGTH;
if(tmpLength2 < CHAR_MAX_LENGTH)
{
if(tmpLength2 > dgcWidth2)
{
dgcWidth2 = tmpLength2;
}
}
else
{
dgcWidth2 = CHAR_MAX_LENGTH
break;
}
}
}
// Added by FT:to change the item renderer for link field
if( dgc2.headerText == GEOMETRY_FIELD || dgc2.headerText == CONTENT_FIELD ||
dgc2.headerText == ICON_FIELD || dgc2.headerText == LINK_FIELD ||
dgc2.headerText == POINT_FIELD || dgc2.headerText == TITLE_FIELD ||
dgc2.headerText == LINK_NAME_FIELD)
{
if(dgc2.headerText == CONTENT_FIELD && showContent)
{
//something
}
else
{
dgcWidth2 = 0;
}
}
totalDGCWidth += dgcWidth2;
}
dg.width = totalDGCWidth;
for( var k:Number = 0; k < dg.columns.length; k++)
{
var dgc:DataGridColumn = dg.columns[k];
var dgcWidth:Number = dgc.headerText.length * CHAR_LENGTH;
for( var n:Number = 0; n < newAC.length; n++)
{
var row:Object = newAC.getItemAt(n) as Object;
var rowVal:String = row[dgc.headerText];
if(rowVal != null)
{
var tmpLength:Number = rowVal.length * CHAR_LENGTH;
if(tmpLength < CHAR_MAX_LENGTH)
{
if(tmpLength > dgcWidth)
{
dgcWidth = tmpLength;
}
}
else
{
dgcWidth = CHAR_MAX_LENGTH
break;
}
}
}
if( dgc.headerText == GEOMETRY_FIELD || dgc.headerText == CONTENT_FIELD ||
dgc.headerText == ICON_FIELD || dgc.headerText == LINK_FIELD ||
dgc.headerText == POINT_FIELD || dgc.headerText == TITLE_FIELD ||
dgc.headerText == LINK_NAME_FIELD)
{
if(dgc.headerText == CONTENT_FIELD && showContent)
{
dgc.visible = true;
}
else
{
dgc.visible = false;
dgcWidth = 0;
}
}
if( dgc.headerText == LINK_COL_NAME)
{
dgcWidth = LINK_COL_WIDTH;
}
dgc.width = dgcWidth;
}
dg.addEventListener(ListEvent.ITEM_CLICK,rowClicked);
dg.addEventListener(ListEvent.ITEM_ROLL_OVER,mouseOverRow);
dg.addEventListener(ListEvent.ITEM_ROLL_OUT,mouseOutRow);
var title:Text = new Text();
title.text = titleText;
title.setStyle("fontWeight","bold");
//resultsArea.addChild(title);
return dg;
//tabNaviId.selectedIndex=2;
}
public function populateGrid(dgCollection:ArrayCollection):void{
for( var k:Number = 0; k < dgCollection.length; k++)
{
var box:HBox=new HBox();
var dg2:DataGrid=dgCollection.getItemAt(k) as DataGrid;
box.label="some";
box.addChild(dg2);
tabNaviId.addChild(box);
}
resultsArea.addChild(tabNaviId);
}
and the tab navigator declared as
<mx:Image id="showHidePic" click="toggleResults()"/>
<mx:VBox y="20" styleName="ResultsArea" width="100%" height="100%">
<mx:HBox>
<mx:Button label="Export to Excel" click="downloadExcel()"/>
<mx:Button label="Clear" click="clear()" />
</mx:HBox>
<mx:VBox id="resultsArea" styleName="ResultsContent" paddingTop="10" paddingLeft="10" paddingRight="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:TabNavigator id="tabNaviId" width="622" height="274" creationPolicy="all">
</mx:TabNavigator>
</mx:VBox>
</mx:VBox>

Answer 1

Abstract, can we get the full code including the loop you mention, as well as the code where you create the TabNavigator?
It's possible that the TabNavigator already has an initial child, and all the children you're creating are being added after that.