9 Replies Latest reply on Sep 24, 2010 12:36 AM by rck_Cena77

    List with variable row height

    archemedia Level 4

      Hi, please look at the example below

       

      What I do is:

      - I create a list component with variableRowHeight set to true.

      - The dataProvider contains 2 numbers: 2 and 3

      - In the itemRenderer, this causes buttons being created, respectively 2 and 3

      - As you can see, the height of the list is miscalculated, a scrollbar is appearing.

      - When you switch 2 and 3 (so that the array becomes 3 and 2) the list is too large.

       

      - I could make a custom list class and override the measure method but I can't figure out what to measure. I should be able to walk through the itemRenderers and measure their height.

       

      Any ideas?

       

      Thx,

       

      Dany

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">

       

          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                 
                  [Bindable]
                  private var dp:ArrayCollection;
                 
                  private function init():void
                  {
                      var a:Array = [2, 3];
                      dp = new ArrayCollection(a);
                  }
                 
              ]]>
          </mx:Script>
          <mx:List width="100%" dataProvider="{dp}" variableRowHeight="true" rowCount="{dp.length}">
              <mx:itemRenderer>
                  <mx:Component>
                      <mx:VBox>
                          <mx:Script>
                              <![CDATA[
                                  import mx.controls.Button;
                                  override public function set data(value:Object):void
                                  {
                                      super.data = value;
                                     
                                      if (this.numChildren == 0)
                                      {
                                          for (var i:int = 0; i < value; i++)
                                          {
                                              var b:Button = new Button();
                                              b.label = "Row " + value;
                                              this.addChild(b);
                                          }
                                      }
                                  }
                              ]]>
                          </mx:Script>
                      </mx:VBox>
                  </mx:Component>
              </mx:itemRenderer>
          </mx:List>
      </mx:Application>

        • 1. Re: List with variable row height
          Flex harUI Adobe Employee

          The first element is measured and rowCount is then used to guess at the list

          size.  You'll have to decide how you want to compute the measuredHeight in

          this case.

          • 2. Re: List with variable row height
            archemedia Level 4

            ok, but one should think that, if variableRowHeight is true, the class itself would calculate the height? Why else is this property for?

             

            Dany

            • 3. Re: List with variable row height
              Flex harUI Adobe Employee

              We don't want to take the time to measure that many renderers in order to

              get it exact, and then it might change in some way after that.  You can get

              a better measurement via measuredHeightOfItems

              1 person found this helpful
              • 4. Re: List with variable row height
                archemedia Level 4

                Eh, what is measuredHeightOfItems?

                And, suppose I only have a maximum of 3 to 4 itemRenderers, how can I get to them?

                 

                Dany

                • 5. Re: List with variable row height
                  Flex harUI Adobe Employee

                  Sorry, it is a method on List called measureHeightOfItems.  Get the results,

                  add in viewMetrics.top and bottom and you should have the exact size of the

                  List.

                  • 6. Re: List with variable row height
                    archemedia Level 4

                    Thx! A huge problem solved!

                     

                    Dany

                    • 7. Re: List with variable row height
                      Shubhra Bhushan Level 1

                      Hi Dany,

                       

                      I have same problem as you faced but didn't understand the answer very much.

                      This is the structure of my code:

                      <Canvas>

                           <List>

                                <itemRenderer - which is a windowshade component having custom datagrid inside it>

                           </List>
                      </Canvas>

                       

                      List property variablerowheight="true". My problem is that the List's row height is rendered less however less components the datagrid inside it may have and the scrollbar the list shows are useless coz they seem to be going behind the UI.

                      How do I calculate correct height of List's row and assign it that height?

                       

                      Thanks

                      Shubhra Bhushan

                      • 8. Re: List with variable row height
                        archemedia Level 4

                        Make a custom class like this:

                         

                        package yourpackage
                        {
                            import mx.controls.List;

                         

                            public class AdvancedList extends List
                            {
                                public function AdvancedList()
                                {
                                    super();
                                    variableRowHeight = true;
                                }
                               
                                override protected function measure():void
                                {
                                    super.measure();
                                    //sovled on forum by Flex HarUI
                                    measuredHeight = measureHeightOfItems() + viewMetrics.top + viewMetrics.bottom;
                                }
                            }
                        }

                         

                        That should do it!

                         

                        Dany

                        • 9. Re: List with variable row height
                          rck_Cena77 Level 1

                          Hi Dany,

                                   i had the same problem and i implemented the measure method it didn't work in my case.

                           

                          my problem is i had a variable list rows, and verticalscrollbar set to true, when the second item is added it was displayed only 3/4th and the scrollbar is moving only for half part, and remaining part we have to drag it.

                           

                          same thing if we add the 3,4 items are added, the last item is displayed 3/4th and verticalscrollbar is behaving differently, sometimes 3 and 4th items are overlapping, not able to understand

                           

                          some of my code:

                           

                          <components:AdvancedList  offscreenExtrarowsorcolumns="1" dp="somethings" itemChangeEffect="{listEffect} verticalSrollBarStyleName="Somehting">

                           

                          <components:itemRenderer>

                                      <fx:component>

                                           <mx:Grid>

                                                    <mx:GridRow>......

                           

                          Thanks for reading.