Sree,
You can create an ItemRenderer based on any UIComponent and add your states
into that. Then assign that ItemRenderer to your List. I have started working
on an example. This is not complete because it doesnt handle selecting an
item. But it should be a good starting point.
DynamicListItemRenderer.mxml:
<?xml
version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml" borderStyle="solid"
backgroundColor="0xFFFFFF"
verticalGap="-2" cornerRadius="4"
borderColor="0x000000"
rollOver="currentState='expanded'"
rollOut="currentState=''">
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Resize target="{this}"
duration="300"/>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="expanded">
<mx:AddChild creationPolicy="all">
<mx:Label text="{data.desc}"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Label text="{data.label}"/>
</mx:VBox>
Main.mxml:
<?xml
version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" width="600" height="500"
preinitialize="initList()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var
dataList:ArrayCollection;
public function initList():void
{
dataList = new ArrayCollection([{label:"One", desc:"The
US won the game on a last second
goal"},
{label:"Two", desc:"The pressure was too much to
overcome"},
{label:"Four", desc:"Look for exciting matchups"}]);
}
]]>
</mx:Script>
<mx:List id="mainList" itemRenderer="DynamicListItemRenderer"
variableRowHeight="true"
width="100%" height="300"
dataProvider="{dataList}"/>
</mx:Application>
Is it possible to create states
within a List that changes height on select?
Basically, I need to switch
between a simple and advanced view in a list only on
select.
I tried using a Repeater in a
VBox, but navigating up and down using arrow keys is not possible(?) when
using a repeater.
Any guidance is
appreciated.
