2 Replies Latest reply on Apr 28, 2010 4:40 AM by Sean Bowman 23

    Custom ItemRenderer and list horizontal auto scroll

    Sean Bowman 23

      I'm trying create a custom ItemRenderer for a list, and everything loads correctly and looks right, except that when I update the dataProvider in the list that uses the renderer, it never adds the horizontal scrollbar when the list items are too big.  Instead, they just overflow.

       

      Here's my code:

       

      [Event(name="dataChange", type="mx.events.FlexEvent")]

       

      public class CategoryItemRenderer extends UIComponent implements IDropInListItemRenderer, IListItemRenderer, IDataRenderer

      {

      private var category:Category;

      private var _listData:BaseListData;

       

      private var nameLabel:Label;

      private var slugLabel:Label;

       

      public function CategoryItemRenderer()

      {

      super();

      }

       

      [Bindable("dataChange")]

      public function get data():Object

      {

      return category;

      }

       

      public function set data(value:Object):void

      {

      category = value as Category;

      dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

      invalidateSize();

      invalidateDisplayList();

      }

       

      public function get listData():BaseListData

      {

      return _listData;

      }

       

      public function set listData(value:BaseListData):void

      {

      _listData = value;

      }

       

      override protected function createChildren():void

      {

      nameLabel = new Label();

      slugLabel = new Label();

       

      this.addChild(nameLabel);

      this.addChild(slugLabel);

      }

       

      /**

      * Called by the framework during init, also when you call invalidateProp=

      erties

      */

      override protected function commitProperties():void

      {

      super.commitProperties();

       

      if (category)

      {

      nameLabel.text = category.name;

      slugLabel.text = category.slug;

      }

      else

      {

      nameLabel.text = "";

      slugLabel.text = "";

      }

       

      invalidateSize();

      invalidateDisplayList();

      }

       

      override protected function measure():void

      {

      super.measure();

      measuredWidth = nameLabel.getExplicitOrMeasuredWidth() + slugLabel.getExplicitOrMeasuredWidth() + 20;

      measuredHeight = nameLabel.getExplicitOrMeasuredHeight();

      }

       

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

      {

      super.updateDisplayList(unscaledWidth, unscaledHeight);

       

      nameLabel.x = 0;

      nameLabel.y = 0;

      nameLabel.setActualSize(nameLabel.getExplicitOrMeasuredWidth(), nameLabel.getExplicitOrMeasuredHeight());

       

      slugLabel.x = nameLabel.x + nameLabel.width + 10;

      slugLabel.y = nameLabel.y;

      slugLabel.setActualSize(slugLabel.getExplicitOrMeasuredWidth(), slugLabel.getExplicitOrMeasuredHeight());

      }

      }

      I've searched through all the various online examples and tutorials, and combed this list, but I'm at a complete loss.  No one seems to mention scrolling adjustments anywhere, or when they do, they talk about it like I should know what they're talking about.  Am I just missing something completely obvious?

       

      We're using Flex 3.5, so maybe this is just a 3.5 issue?