Flex ViewStack With A Repeater - Repeater Gets Placed At The Bottom

Question

I have a problem when creating a ViewStack, with a repeater along with other components (i.e. vBox) inside the ViewStack. The repeaters get placed at the bottom of the view. Despite the repeater is listed before other components, it is placed at the bottom.

Is there a workaround where I can get the repeater drawn before the other components?

I googled this and someone else asked the same question on another site, but no one answered. I am pasting sample code from their post. The repeater is drawn last.

Thanks

Here is an example:

<mx:ViewStack id="viewStack" width="100%" height="100%" backgroundColor="#FFFFFF" 
         backgroundAlpha="1" paddingLeft="5" paddingRight="5" paddingBottom="5">

    <mx:Repeater id="editorsRP" dataProvider="{dynamicFields}" 
          repeatEnd="organizeViewStack();" width="100%" height="100%">

        <editor:DynamicFieldEditor label="{FieldGroup(editorsRP.currentItem).name}" 
              width="100%" height="100%" fields="{FieldGroup(editorsRP.currentItem).fields}" dataProvider="{details}" />

    </mx:Repeater>

    <editor:NotesEditor id="notesEditor" width="100%" height="100%" label="Notes" 
         enabled="false" notesProvider="{attachment}" />

</mx:ViewStack>

Answer 1

I'm guessing a bit, but

All of a ViewStack's children must be a container. The Repeater is not a container. So, it's placement as a ViewStack children is irrelevant, because for all intents and purposes it is ignored.

However, when the repeater executes it creates a bunch of containers and adds them to the parent (AKA ViewStack); thus giving them a different Z-order than what you might expect from the code.

Are you trying to create many different children of the ViewStack? Or are you expecting the "DynamicFieldEditors" to be stacked somehow?

Answer 2

I believe the problem is when the dataProvider is having it value set / changed.

This isn't shown in the code above, so it's hard to know. However, whenever the value of this is changed, the existing children created by the repeater will be removed from the parent, and new ones will be added.

If the ViewStack's children have already been created, then the children from the repeater will be placed after the existing children.

For example:

 <mx:TabNavigator width="500">
      <mx:VBox label="Static 1" />
      <mx:Repeater dataProvider="{['a','b','c']}">
          <mx:VBox label="From repeater" />
      </mx:Repeater>
      <mx:VBox label="Static 2" />
  </mx:TabNavigator>

In this instance, the dataProvider is set during the initialization of the repeater, so the tabs appear in order:

¦ Static 1 ¦ From Repeater ¦ From Repeater ¦ From Repeater ¦ Static 2 ¦

However, if the value of the dataProvider changes (or the dataProvider dispatches a CollectionChangeEvent), then the 3 repeater children would be removed, and new children added. This would leave the tab order:

¦ Static 1 ¦ Static 2 | From Repeater ¦ From Repeater ¦ From Repeater ¦

I notice you've wired an organizeViewStack method to the repeatEnd event handler - although the code for the method isn't shown.

This looks like the best way of managing this - reshuffling the order of the children once they've been set.