How to make dynamic list component in Flex 4.6 mobile project?

Question

how can i change my list component in Flex 4.6 mobile project with that when an item is pressed it would dynamicly resize and show an article description and a button

here is preview: https://lh4.ggpht.com/GObdGVeDrLW_A-4_ZwuXzh21UY_JyT1P4RdpY6KYYMkW2L8rA08apQllt8cDpcM14w

Thank you

Answer 1

Use ItemRenderer in your list. In that item renderer you can use labels, groups, lists buttons and whatever you want

Eg this is main list

<s:List id="t_list"  width="100%" height="100%" itemRenderer="itemrenderer.ticketItemRenderer_One" contentBackgroundAlpha="0" left="5" right="5">
    <s:layout>
        <s:VerticalLayout gap="4" horizontalAlign="right" />
    </s:layout>
</s:List>

---

and this is item renderer code you can user

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark"  height="65" autoDrawBackground="false" click="itemrenderer1_clickHandler(event)"  >

    <fx:Style source="creobill.css" />

    <fx:Script>
        <![CDATA[

            import assets.triangle_white;

            import views.utilities;
        /*  open
            awaiting
            closed
            in progress */


            protected function itemrenderer1_clickHandler(event:MouseEvent):void
            {
            //  this.parentApplication.accountVN.pushView(utilities);
            }

        ]]>
    </fx:Script>


    <s:BitmapImage source="{triangle_white}" height="10" x="10" y="20" width="10" alpha="1" rotation="90" smooth="true" smoothingQuality="high"/>
    <s:Rect top="0" bottom="0" right="0" left="10" x="10" radiusY="4" radiusX="4" alpha="1" >
        <s:fill>
            <s:LinearGradient >
                <s:GradientEntry color="#ffffff" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>    
    <s:VGroup left="13" right="6" top="3" bottom="3" x="5" gap="2" horizontalAlign="center"  verticalAlign="middle">

    <s:HGroup  width="100%" height="50%" horizontalAlign="left" verticalAlign="middle">
        <s:Label id="t_subject" width="100%" height="100%" fontWeight="bold" styleName="content"
                 text="{data.subject}" />

    </s:HGroup> 



    <s:HGroup width="100%" height="50%" horizontalAlign="left" verticalAlign="middle">
        <s:Label id="y_list_replier" width="70%" height="100%" fontStyle="italic" styleName="content"
                 text="{data.lastreplier}" verticalAlign="middle"/>
        <s:Label id="t_status" width="30%" color="#373737" fontWeight="bold" styleName="labels"
                 text=" {data.ticketstatustitle}" textAlign="right"/>
    </s:HGroup>
        <s:Label id="t_last_update" width="100%" color="#585858" fontWeight="bold" styleName="labels"
                 text="Updated: {data.lastactivity}" textAlign="right" verticalAlign="middle"/>
</s:VGroup>
</s:ItemRenderer>

In this way you can add button and set click method to show or hide the components you want