Increase height of just one ItemRender

Question

I am trying to develop a Call Log with Flex, and I have some troubles with the ItemRenders. In fact, here is what I've got :

And when you click on an Item, the size of the Item changes to display more details :

But as you can see, every item are affected by this resize. The Tile Layout is taking the highest render and apply its height to the others.

Here is my code, where I call the Render :

    <s:DataGroup id="TileListUsers"
                 left="10" right="10" top="10" bottom="10" width="300"
                 itemRenderer="assets.render.CallLogRender"
                 dataProvider="{ListCall}"
                 horizontalCenter="0" verticalCenter="0" contentBackgroundAlpha="0.0">
        <s:layout>
            <s:TileLayout horizontalGap="15" requestedColumnCount="1" verticalGap="15" />
        </s:layout>
    </s:DataGroup>

And in the Render, I'm using three BorderContainer, one for the first block, one for the second block, and one for the details displayed between them :

        override public function set data(value:Object):void {
            super.data = value;

            CallerIDLabel.text = "Appel du : " + data.CallerID;
            StartHourLabel.text = data.StartHour;
            StartDateLabel.text = data.StartDate;
            if(value == null){
                return;
            }
            if (!data.Answer){      
                ShadowColor.color=0xCC9900;
                CallerIDLabel.text = "Appel manqué : " + data.CallerID;
                SourceIcon.source=callFinished;
            }   
        }

        private function onClick():void{
            if (data.Answer){
                this.height=170;
                DetailLineContainer.visible=true;
                SecondBlocContainer.visible=true;
            }
        }
    ]]>
</fx:Script>


<s:BorderContainer id="DetailLineContainer" x="0" y="39" width="100%" height="101"
                   backgroundAlpha="0.0" borderColor="#FFFFFF" borderVisible="false"
                   borderWeight="1" cornerRadius="5" visible="false" >
    <s:Line id="LineDetail" x="25" y="0" height="100%">
        <s:stroke>
            <s:SolidColorStroke color="#aeaeae" weight="3" caps="square"/>
        </s:stroke>
    </s:Line>
    <s:Graphic x="21" y="25" width="8" height="8">    
        <s:Ellipse x="0" y="0" width="8" height="8">
            <s:fill>
                <s:SolidColor id="CircleColor" color="#5b5b5b"/>
            </s:fill>
        </s:Ellipse>
    </s:Graphic>
    <s:Graphic x="21" y="53" width="8" height="8">    
        <s:Ellipse x="0" y="0" width="8" height="8">
            <s:fill>
                <s:SolidColor id="CircleColor2" color="#5b5b5b"/>
            </s:fill>
        </s:Ellipse>
    </s:Graphic>
    <s:Label id="DurationLabel" x="35" y="25" width="250"
             color="#929292" fontFamily="proxima" fontSize="13"
             text="Durée de l'appel : 13 minutes 23 secondes" textAlign="left"
             verticalAlign="top"/>
    <s:Label id="QualityLabel" x="35" y="52" width="250"
             color="#929292" fontFamily="proxima" fontSize="13"
             text="Qualité de l'appel : moyenne" textAlign="left"
             verticalAlign="top"/>
</s:BorderContainer>

<s:BorderContainer id="FirstBlocContainer" width="100%" height="50" click="onClick()" backgroundColor="#FFFFFF"
                   borderColor="#FFFFFF" borderVisible="false" borderWeight="1" cornerRadius="5">
    <s:BorderContainer width="50" height="50" borderVisible="false" backgroundAlpha="0.0">
        <s:Graphic id="Shadow" x="0" y="0" width="100%" height="100%">
            <s:Rect x="0" y="0" width="50" height="50" bottomLeftRadiusX="5" topLeftRadiusX="5">
                <s:fill>
                    <s:SolidColor id="ShadowColor" color="#70b13c"/>
                </s:fill>
            </s:Rect>
        </s:Graphic>
        <s:Image id="SourceIcon" horizontalCenter="0"
                 source="@Embed('/assets/images/CallLogIncomming.png')" verticalCenter="0"/>
    </s:BorderContainer>

    <s:Graphic id="CallState" x="0" bottom="0" width="100%" height="2%" alpha="0.15">
        <s:Rect x="0" y="-1" width="260" height="2">
            <s:fill>
                <s:SolidColor color="#000000"/>
            </s:fill>
        </s:Rect>
    </s:Graphic>
    <s:Label id="CallerIDLabel" left="60" width="180" color="#5B5B5B" fontFamily="proxima"
             fontSize="14" maxDisplayedLines="2" text="Appel du : 0636360400" textAlign="left"
             verticalAlign="middle" verticalCenter="0"/>
    <s:Label id="StartDateLabel" y="10" right="5" width="50" color="#C0C4C3" fontSize="12" text="08/04/14"
             textAlign="center" verticalAlign="middle"/>
    <s:Label id="StartHourLabel" y="24" right="5" width="50" color="#C0C4C3" fontSize="12"
             text="12:45" textAlign="center" verticalAlign="middle"/>
</s:BorderContainer>

<s:BorderContainer id="SecondBlocContainer" x="0" y="117" width="100%" height="50"
                   backgroundColor="#FFFFFF" borderColor="#FFFFFF" borderVisible="false"
                   borderWeight="1" cornerRadius="5" visible="false" >
    <s:BorderContainer width="50" height="50" borderVisible="false" backgroundAlpha="0.0">
        <s:Graphic id="CallState2" x="0" y="0" width="100%" height="100%">
            <s:Rect x="0" y="0" width="50" height="50" bottomLeftRadiusX="5" topLeftRadiusX="5">
                <s:fill>
                    <s:SolidColor id="ShadowColor2" color="#B1463C"/>
                </s:fill>
            </s:Rect>
        </s:Graphic>
        <s:Image id="SourceIcon2" horizontalCenter="0"
                 source="@Embed('/assets/images/CallLogFinished.png')" verticalCenter="0"/>
    </s:BorderContainer>

    <s:Graphic id="Shadow2" x="0" bottom="0" width="100%" height="2%" alpha="0.15">
        <s:Rect x="0" y="-1" width="260" height="2">
            <s:fill>
                <s:SolidColor color="#000000"/>
            </s:fill>
        </s:Rect>
    </s:Graphic>
    <s:Label id="CallerIDLabel2" left="60" width="180" color="#5B5B5B" fontFamily="proxima"
             fontSize="14" maxDisplayedLines="2" text="Vous avez raccroché" textAlign="left"
             verticalAlign="middle" verticalCenter="0"/>
    <s:Label id="StopDateLabel" y="10" right="5" width="50" color="#C0C4C3" fontSize="12" text="08/04/14"
             textAlign="center" verticalAlign="middle"/>
    <s:Label id="StopHourLabel" y="24" right="5" width="50" color="#C0C4C3" fontSize="12"
             text="12:45" textAlign="center" verticalAlign="middle"/>
</s:BorderContainer>

Is there a way to say to the TileLayout to just increase the height of one component without affecting the others ?

Answer 1

Why use TileLayout if you have only one column? Use VerticalLayout and set its variableRowHeight property to true. Here's an example.