1 Reply Latest reply on Dec 29, 2007 12:35 AM by jglaeser

    List using an item renderer with variable row height

    jglaeser
      Hello All,

      I am trying to create what amounts to a list of comments. A comment has a comment string and a name and all the comments will be placed in a list in order to be able to scroll up and down to view all the comments.

      here is a sample example:

      App code:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
      <mx:List dataProvider="{list}" itemRenderer="ListRenderer" width="200" variableRowHeight="true" wordWrap="true">
      </mx:List>

      <mx:Script>
      <![CDATA[

      [Bindable]
      private var list:Array = new Array(
      {comment:"Test", name:"Joe"},
      {comment:"This is a long comment that should wrap over multiple lines", name:"Joe"},
      {comment:"Test", name:"Joe"},
      {comment:"Test", name:"Joe"},
      {comment:"This is a long comment that should wrap over multiple lines", name:"Joe"},
      {comment:"Test", name:"Joe"},
      {comment:"Test", name:"Joe"},
      {comment:"This is a long comment that should wrap over multiple lines", name:"Joe"},
      {comment:"Test", name:"Joe"}

      );


      ]]>
      </mx:Script>
      </mx:Application>


      Item Renderer Code:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml">
      <mx:Text text="{data.comment}" width="100%"/>
      <mx:HBox width="100%" horizontalAlign="right">
      <mx:Text text="- {data.name}"/>
      </mx:HBox>
      </mx:VBox>


      When I run this the list it is created with each object being renderer properly, but keep an eye on the height of the comments when you scroll up and down (it may take a few scrolls to see it), when a comment moves out of the visible range and then moves back into the visible range, the height of the comments seems to reset it itself, you will see the name disappear (and sometimes reappear again). One, can anyone explain what is going on? Two, is this the best approach, I have also considered using a vbox and repeater but so far the current implementation is the closest I have come to creating the desired result. Thanks in advance.
        • 1. Re: List using an item renderer with variable row height
          jglaeser Level 1
          Ok I figured out how to fix this:

          new itemRenderer code:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml">
          <mx:Text id="commentText" text="{data.comment}" width="100%"/>
          <mx:HBox width="100%" horizontalAlign="right">
          <mx:Text text="- {data.name}"/>
          </mx:HBox>

          <mx:Script>
          <![CDATA[

          // Override the set method for the data property.
          override public function set data(value:Object):void {
          super.data = value;

          if (value != null)
          {
          commentText.text = value.comment;
          commentText.validateNow();
          }
          }
          ]]>
          </mx:Script>

          </mx:VBox>

          The important thing here is to override set data method, set the comment string then call validateNow(); this will insure that the textHeight is updated and the right height is used