hi,
i have a resizable datagroup (vertical layout) and i want to have a
itemrenderer with a rectangle that fits the with of the datagroup.
i have tried itemrenderer width="100%" or left=0 right=0 but does not work when
it is resized by the states.
am i doing something wrong here or is it a gumbo bug?
>>>>>>>
<s:List id="meetingsList" skinClass="ui.components.MeetingsList" right="0"
left="0" top="0" bottom="40">
<s:ArrayCollection>
<fx:Object hour="xxx" date="xxx" info="asdkjha
sdlkajsd lakjds" status="xxx"/>
</s:ArrayCollection
</s:List>
>>>>>>>
<?xml version="1.0" encoding="utf-8"?>
<s:Skin
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009";>
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<fx:Metadata>[HostComponent("spark.components.List")]</fx:Metadata>
<s:DataGroup itemRenderer="ui.components.MeetingsListRenderer"
left="0" right="16" top="0" bottom="0"
clipAndEnableScrolling="true" id="dataGroup" >
<s:layout>
<s:VerticalLayout gap="10" />
</s:layout>
</s:DataGroup>
<s:VScrollBar right="0" top="0" bottom="0"
skinClass="ui.components.VScrollBar"
fixedThumbSize="false" id="vscrollbar"
viewport="{dataGroup}"/>
</s:Skin>
>>>>>>>>>>
<?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"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="100%">
<fx:Script>
<![CDATA[
import events.MeetingsEvent;
import spark.skins.default.ButtonSkin;
override public function set data( value:Object ):void
{
super.data = value;
if (value)
{
closedRect.visible = false;
closedRect.includeInLayout = false;
availableRect.visible = false;
availableRect.includeInLayout = false;
alertRect.visible = false;
alertRect.includeInLayout = false;
switch (data.status)
{
case "alert":
alertRect.visible =
true;
alertRect.includeInLayout = true;
break;
case "closed":
closedRect.visible =
true;
closedRect.includeInLayout = true;
break;
case "available":
availableRect.visible =
true;
availableRect.includeInLayout = true;
break;
}
}
}
]]>
</fx:Script>
<s:transitions>
<s:Transition toState="selected" autoReverse="true">
<s:Parallel>
<s:Fade target="{expandGroup}" duration="300" />
<s:Resize target="{this}" duration="300" />
</s:Parallel>
</s:Transition>
<s:Transition toState="normal" autoReverse="true">
<s:Parallel>
<s:Fade target="{expandGroup}" duration="300" />
<s:Resize target="{this}" duration="300" />
</s:Parallel>
</s:Transition>
</s:transitions>
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<s:Group height="60" left="0" right="0" top="0">
<s:Rect id="closedRect" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient x="0" scaleX="60"
rotation="90">
<s:GradientEntry color="0xf1f1f1"
ratio="0"/>
<s:GradientEntry color="0xe6e6e6"
ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="availableRect" left="0" right="0" top="0"
bottom="0">
<s:fill>
<s:LinearGradient x="0" scaleX="60"
rotation="90">
<s:GradientEntry color="0xa7e9a4"
ratio="0"/>
<s:GradientEntry color="0x88e284"
ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="alertRect" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient x="0" scaleX="60"
rotation="90">
<s:GradientEntry color="0xfdf799"
ratio="0"/>
<s:GradientEntry color="0xfcee21"
ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="highlight" left="0" right="0" top="0" bottom="0"
alpha.normal="0" alpha.hovered="0.1"
alpha.selected="0.2" >
<s:fill>
<s:SolidColor color="0xFFFFFF"/>
</s:fill>
</s:Rect>
<s:SimpleText left="12" top="32" right="12"
fontFamily="Lucida Grande" fontSize="18"
fontWeight="bold"
lineHeight="120%" color="0x1a1a1a" kerning="on"
text="{data.hour}" />
<s:SimpleText left="12" top="12" right="12"
fontFamily="Lucida Grande" fontSize="14"
fontWeight="bold"
lineHeight="120%" color="0x1a1a1a" kerning="on"
text="{data.date}" />
</s:Group>
</s:ItemRenderer>
