List/ItemRenderer troubles

Question

Hey,
I just submitted a bug here: http://bugs.adobe.com/jira/browse/SDK-24069 and thought I would see if the community had a workaround. Like always, I could just be missing something really basic. Thanks,
- e
Oh, the code (and playable swf) is posted at jira, but I'll reproduce it here (must use latest SDK build...).
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/halo">
  <fx:Script>
    <![CDATA[
      [Bindable] public var itemRenderersHeight:int = 60;
    ]]>
  </fx:Script>
  <s:HGroup gap="20" y="100" x="100">
    <s:List id="myList" borderVisible="false">
      <!--<s:layout><s:VerticalLayout /></s:layout>-->
      <s:ArrayCollection>
        <fx:Object label="hello"  color="0xff0000" />
        <fx:Object label="cruel"  color="0x00ff00" />
        <fx:Object label="world!" color="0x0000ff" />
      </s:ArrayCollection>
      <s:itemRenderer >
        <fx:Component>
          <s:ItemRenderer width="100%" height="{myItemRenderersHeight}"
                  mouseOver="{myBorder.setStyle('backgroundAlpha',.8)}"
                  mouseOut="{myBorder.setStyle('backgroundAlpha', .5)}"
                  creationComplete="init()">
            <fx:Script>
              <![CDATA[
                import mx.binding.utils.BindingUtils;
                import mx.binding.utils.ChangeWatcher;
                [Bindable] public var myItemRenderersHeight:int = 60;
                protected function init():void {
                  myItemRenderersHeight = this.parentApplication.itemRenderersHeight;
                  var watcherSetter:ChangeWatcher =
                    BindingUtils.bindSetter(updateHeight, this.parentApplication, "itemRenderersHeight");
                public function updateHeight(val:int):void {
                  this.height = val;
              ]]>
            </fx:Script>
            <s:Border id="myBorder" width="100%" height="100%"
                  borderColor="green" borderWeight="2"
                  backgroundColor="{data.color}" backgroundAlpha=".5">
              <s:Label id="myLabel" text="{data.label}" verticalCenter="0" horizontalCenter="0" />
            </s:Border>
          </s:ItemRenderer>
        </fx:Component>
      </s:itemRenderer>
    </s:List>
    <s:Label height="{itemRenderersHeight}" width="100"
         text="height: {itemRenderersHeight}px" backgroundAlpha=".6" backgroundColor="black" color="white"
         verticalAlign="middle" textAlign="center"/>
    <s:NumericStepper stepSize="5" minimum="10" maximum="130" value="@{itemRenderersHeight}"/>
  </s:HGroup>
</s:Application>

Answer 1

grrrrr, super simple solution -- remove height/width properties of <s:ItemRenderer> and paste them into the <s:Border> class (the uicomponent wrapped by the itemrenderer). Also for a cleaner look, uncomment the list's layout property and set gap to -1.
my understanding is that <s:itemRenderer> (pay attention to case) is a factory class, which churns out the contents of <s:ItemRenderer> (a subclass of the Group UIComponent), so I'm confused why I can't set the dimensions directly on <s:ItemRenderer>.
Anyway, here is the fixed code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/halo">
  <fx:Script>
    <![CDATA[
      [Bindable] public var itemRenderersHeight:int = 60;
    ]]>
  </fx:Script>
  <s:HGroup gap="20" y="100" x="100">
    <s:List id="myList" borderVisible="false">
      <s:layout><s:VerticalLayout gap="-1"/></s:layout>
      <s:ArrayCollection>
        <fx:Object label="hello"  color="0xff0000" />
        <fx:Object label="cruel"  color="0x00ff00" />
        <fx:Object label="world!" color="0x0000ff" />
      </s:ArrayCollection>
      <s:itemRenderer >
        <fx:Component>
          <s:ItemRenderer initialize="init()">
            <fx:Script>
              <![CDATA[
                import mx.binding.utils.BindingUtils;
                import mx.binding.utils.ChangeWatcher;
                protected function init():void {
                  var watcherSetter:ChangeWatcher =
                    BindingUtils.bindSetter(updateHeight, this.parentApplication, "itemRenderersHeight");
                public function updateHeight(val:int):void {
                  myBorder.height = val;
              ]]>
            </fx:Script>
            <s:states>
              <s:State name="normal" />
              <s:State name="hovered" />
            </s:states>
            <s:Border id="myBorder" width="200"
                  borderColor="green" borderWeight="2"
                  backgroundColor="{data.color}"
                  backgroundAlpha=".5" backgroundAlpha.hovered=".9">
              <s:Label id="myLabel" text="{data.label}" verticalCenter="0" horizontalCenter="0" />
            </s:Border>
          </s:ItemRenderer>
        </fx:Component>
      </s:itemRenderer>
    </s:List>
    <s:Label height="{itemRenderersHeight}" width="100"
         text="height: {itemRenderersHeight}px" backgroundAlpha=".6" backgroundColor="black" color="white"
         verticalAlign="middle" textAlign="center"/>
    <s:NumericStepper stepSize="5" minimum="10" maximum="130" value="@{itemRenderersHeight}"/>
  </s:HGroup>
</s:Application>
- e