Learning to share Lex tree Diffrient Row Height (tree row height adjustment)

Source: Internet
Author: User

Creating a flex tree with variable height rows can be mysteriously difficult if you are new to flex item renderers. this cookbook will give you the step by step instructions to creating a tree control with variable height renderers.

First you will need to define your tree component:

 1 <mx:Tree itemRenderer="{new ClassFactory(CustomTreeItemRenderer)}" 2     labelField="@name" 3     showRoot="false" 4     variableRowHeight="true" 5     width="200" 6     height="350"> 7   <mx:XMLListCollection id="Characters"> 8    <mx:XMLList> 9     <movie>10      <main name="Leon" height="25">11       <sub name="Mathilda" height="50"/>12       <sub name="Tony" height="75"/>13      </main>14      <main name="Stansfield" height="50">15       <sub name="Benny" height="100"/>16      </main>17     </movie>18    </mx:XMLList>19   </mx:XMLListCollection>20  </mx:Tree>

 

Notice that the tree control has the attribute "variablerowheight" set to true. this is very important since it will allow all of the rows to be a different height. we also set our data provider to have names which will be used as our Renderer's label and heights which will be used to resize each Renderer.

The next most important attribute here is the "itemrenderer" which is defined as new classfactory (mtmtreeitemrenderer). This means that we will be using a component called the customtreeitemrenderer as our itemrenderer.

Now, we must create the customtreeitemrenderer. This will extend the treeitemrenderer and will override two methods:

 

  • Measure
  • Updatedisplaylist

 

The measure method simply measures all of the components within the Renderer and sets their heights and widths. Below we can see what our code must do:

override protected function measure():void{    super.measure();    //Check to make sure the data is initialized    if(data && [email protected] > 0){        this.measuredHeight = [email protected];    }}
View code

 

Above, you can see that the code is simply setting the measuredheight of our Renderer to the height that was defined in our tree's data provider above. the @ sign in from of the height attribute is used since we are extracting data from our XML based dataprovider rather than Object Based dataprovider.

Now, that the height is set, we need to override the updatedisplaylist method so that we can correctly layout out newly resized component.

override protected function updateDisplayList(unscaledWidth:Number,                                                      unscaledHeight:Number):void{    super.updateDisplayList(unscaledWidth, unscaledHeight);    //Check to make sure the data is initialized    if(data && [email protected] > 0){        //put the label at the correct y coordinate based on the height        label.y = ([email protected] / 2) - (label.measuredHeight /2);    }}
View code

 

We can see in the code above, that we are setting the label's Y coordinate based on the new height of the Renderer. this is necessary in order to vertically align our label within the new larger Renderer.

That's it. We now have flex tree with variable height rows!

See the sample below which will allow you to download the source by Right clicking:

Learning to share Lex tree Diffrient Row Height (tree row height adjustment)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.