Question

I have three component in the Hgroup and all three component can expand. But the problem is, all three component expansion to the right direction. and the container dont have enough space to do that, so what I need is

the first one expansion to the right

the second one expansion to the right and left

the third one expansion to the left.

and others will be push away in the process.

like this.

But how can I define the component’s expansion direction?

The component’s code is like that

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width.State2="500" height.State2="550"
         width.State1="330" height.State1="550">



    <s:states>
        <s:State name="State1"/>
        <s:State name="State2"/>
    </s:states>



    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <mx:LinkButton includeIn="State1" x="222" y="519" label="Expand" click="currentState='State2'"/>
    <mx:LinkButton includeIn="State2" x="433" y="519" label="Return"
                   click="currentState='State1'"/>
</s:Group>

and in the main comp, three of those Comp will be nest in the HGroup

<s:HGroup  x="90" y="62" width="1000" height="550">
    <ns1:comp1>
    </ns1:comp1>
    <ns1:comp2>
    </ns1:comp2>
    <ns1:comp3>
    </ns1:comp3>
</s:HGroup>

Answer 1

easiest way would be with states.

<s:states>
    <s:State name="normal"/>
    <s:State name="1Expanded"/>
    <s:State name="2Expanded"/>
    <s:State name="3Expanded"/>
</s:states>

then in your components:

<ns1:comp1
    width="250"
    width.1Expanded="500"
    width.2Expanded="100"
    width.3Expanded="50">

you can adjust these to fit what you need, but that was an example.