[flexcoders] Re: Detecting List width from its itemRenderer

[Alexander]

Hello again,

I thought I've found a solution by using 
the List's resize event to change the size 
of its items, but while it works for the 
simple test case listed below, it goes 
into endless loop in my real app with more 
complex layout and I see the traces:

resize list: 0 -> 480
resize list: 480 -> 480
resize list: 480 -> 464
resize list: 464 -> 464
resize list: 464 -> 480
resize list: 480 -> 480
resize list: 480 -> 464
resize list: 464 -> 464
...


TestCase.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>
<mx:Script>
    <![CDATA[
    import mx.events.*;

    private function resizeHandler(event:ResizeEvent):void {
        var list:List = event.target as List;
        trace(event.oldWidth + ' -> ' + list.width);
        list.rowHeight = list.width / 3;
        RowRenderer._scale = list.rowHeight / (100 + 20);
    }
    ]]>
    </mx:Script>

    <mx:HDividedBox width="100%" height="100%">
    <mx:List id="myList" width="40%" height="100%" 
      alternatingItemColors="[0xCCCCCC, 0xFFFFFF]"
      dataProvider="{['a;b;c', '1;2;3', '4;5', 'd', '6;7;8']}" 
      itemRenderer="RowRenderer" resize="resizeHandler(event)"/>
    <mx:Label text="&lt;-- Resize the list" width="60%"/>
    </mx:HDividedBox>
</mx:Application>


RowRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; 
  width="100%" height="100%" 
  verticalScrollPolicy="off" horizontalScrollPolicy="off">

    <mx:Script>
    <![CDATA[
    import mx.controls.List;
    [Bindable]
    public static var _scale:Number = 1.0;

    override public function set data(obj:Object):void {
        var i:uint;

        super.data = obj;

        for (i = 0; i < _btn.length; i++)
            _btn[i].visible = false;

        if (obj != null) {
            var str:String = String(obj);
            var labels:Array = str.split(/;/);
            for (i = 0; i < _btn.length && i < labels.length; i++) {
                _btn[i].label = labels[i];
                _btn[i].visible = true;
            }
        }
    }
    ]]>
    </mx:Script>

    <mx:HBox width="100%" horizontalAlign="center">
        <mx:Repeater id="_rpt" dataProvider="{[0, 1, 2]}">
        <mx:Button id="_btn" width="100" height="100" fontSize="24"
          textAlign="center" scaleX="{_scale}" scaleY="{_scale}"/>
        </mx:Repeater>
    </mx:HBox>

</mx:Canvas>


Regards
Alex