Flex dynamic form height

Question

I'm not sure if this is possible, is there a way to get the <mx:Form> to set its own height based on the position of an element within it?

For example something like this:

<mx:Form height="{submitBtn.y + submitBtn.height}">

   <mx:FormItem>... </mx:FormItem>

   <mx:FormItem>... </mx:FormItem>

   <mx:FormItem>... </mx:FormItem>

   <mx:FormItem>
       <s:Button id="submitBtn" label="Submit" /> 
   </mx:FormItem>

</mx:Form>

where the form height is dynamically set based on submitBtn's y position and its height.

I tried using Alert.show to show these values and turned out submitBtn.y = 0 and submitBtn.height = 21. height sounds reasonable, but I know the submitBtn.y can't be 0 since it's below several other

Is it possible to set the form height dynamically?

Answer 1

Yes. Do it in the measure method:

private var n:Number = 0;
override protected function measure() : void {
super.measure();
    if (submitBtn) {
        var fi:FormItem = FormItem(submitBtn.parent);
        n = fi.y + fi.height;
    }
}

Then just set the height to n.

Edit: I changed this to specify the containing FormItem, not the button, which is what I tested in my own sample code first. You can either get the button's parent or give that FormItem an ID. But this way does work.

Answer 2

your submitBtn.y will always return 0, since it's the y position inside the mx:FormItem element (like the relative y position)

So as I guess you want to set the y position of a form based of the y position of a button inside the form. why do you want that ?

Answer 3

check out the localToGlobal() method available to all children of DisplayObject. It will convert your x,y coordinates to the global x,y. You should be able to use this in your calculations.

Answer 4

I hope that thread is not closed cause I just have had the same problem like you and found the correct solution, so I will try to explain.

Whenever my application starts it reads a file and parse it, containing some information that will fit some forms, and I create them dynamically without specificating any height or width.

I add them to a viewStack like this:

<mx:ViewStack id="viewStack" resizeToContent="true">
</mx:ViewStack>

that is inside a component to show Information for some items, depending the class of the item one of the form is shown fitting the necessary information in.

As you can notice, the viewstack has inside a property resizeToContent that when I select an item from a datagrid, the viewstack changes the selectedIndex (indicating another form) and automatically changing its size resizing to the new content.

If for some reason you need the height of the form, you can use, instead of measure(), the measuredHeight property.

I will add some of the code used for you to understand:

onCreationComplete(){
    ...
    for each (var form:Form in DataModel.getForms())
    {
        viewStack.addChild(form);
    }
    ...
}