by Alex Harui

 Comments (11)

Created

October 4, 2010

This issue seems to come up frequently:  Someone wants to use a renderer that has a flow-based component like mx:Text or the new Spark Label or Spark RichEditableText and wants the rows to be of variable heights.  Trouble ensues.

There is a key aspect of the MX item renderer lifecycle that has to be accounted for in these scenarios, and that is that, before a renderer is measured, the host List or DataGrid will set the explicitWidth of the renderer to the width of the list or the datagrid column.  This is important since the renderer’s measuredHeight is dependent on the width of the flow-based text components.  If this isn’t handled correctly, the renderer may clip text and/or make it impossible to calculate the exact size of the List or DataGrid.

This also implies that using percent width in a renderer won’t help as percentWidth isn’t applied until after measurement.  You have to tie the width of any flow-based component to the explicitWidth of the renderer so that the measuredHeight is reported correctly.  Sometimes that will require overriding the measure() method, but often you can just use data-binding.

Here  is an example of a custom flow-based renderer.  It draws a square in the upper-left corner and then flows text to the right of it onto multiple lines.  I use data-binding in this example to set the width of the mx:Text so it will then report its measuredHeight correctly.  That allows me to figure out the exact height of the DataGrid by calling measureHeightOfItems and factoring in the viewMetrics.

Run Example
Download Source

COMMENTS

  • By DevSachin - 7:45 AM on October 6, 2010   Reply

    not able to run demo:
    Error is:
    ReferenceError: Error #1065: Variable flash.events::TouchEvent is not defined.
    at spark.components.supportClasses::GroupBase/addEventListener()
    at mx.core::UIComponent()
    at spark.components.supportClasses::GroupBase()
    at spark.components::Group()
    at spark.components.supportClasses::Skin()
    at spark.skins::SparkSkin()
    at mx.skins.spark::SparkSkinForHalo()
    at mx.skins.spark::BorderSkin()
    at mx.skins.spark::ContainerBorderSkin()
    at mx.core::Container/createBorder()
    at mx.core::Container/styleChanged()
    at mx.core::Application/styleChanged()
    at mx.managers.systemClasses::ChildManager/addingChild()
    at mx.managers.systemClasses::ChildManager/initializeTopLevelWindow()
    at mx.managers::SystemManager/initializeTopLevelWindow()
    at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::kickOff()
    at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::preloader_completeHandler()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.preloaders::Preloader/timerHandler()
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()

    • By Alex Harui - 5:39 PM on October 6, 2010   Reply

      Try again. I just uploaded a version on an older SDK. The original was on the Hero builds.

  • By Romey romeeeee - 10:18 PM on October 29, 2010   Reply

    Say bruh! all your shit go HARRRDDDDDDD!!! Thank you very much for all your assistance for real. yooooo, all u gotta do is change the F in flex harui and u got ur name hahhahahahah!

    By the way, Flex 4.5 is POPPINNNNNNNN!!! I had a nasty bug wit the scrollers and shit while i was resizing. fail bruh.

    Im workin wit on a project using Birdeye Ravis for graphs man and its so hard.

    SALUTE BRUHHH

  • By qplayz - 2:35 PM on January 8, 2011   Reply

    I have the same Error :(

  • By Cheng Wei - 7:00 AM on January 13, 2011   Reply

    Hi Alex,

    Good to see your talking on this topic. I have applied with your method, but it still has problems. I made a simple example to demonstrate the problem. Could you please help me? send me your email?

    • By Alex Harui - 5:07 AM on January 17, 2011   Reply

      Try asking on the Adobe Flex forum.

  • By Hemden - 1:10 PM on July 23, 2011   Reply

    Thanks. Adobe Flex Forum heps a lot…
    Many regards from Germany

  • By cloo - 7:52 AM on September 27, 2011   Reply

    cool, how about two Texts, one’s width depends another.

    • By Alex Harui - 4:55 AM on October 28, 2011   Reply

      Should be doable as long as you constrain within the explicitWidth

  • By Vincent - 4:50 PM on December 21, 2011   Reply

    Thanks for this. It solves my variableRowHeight issue but it adds blank rows in the PrintDataGrid.
    Any idea ?

    • By Alex Harui - 6:36 AM on January 3, 2012   Reply

      Ask for help on the forums.

ADD A COMMENT