15 Replies Latest reply on Sep 29, 2010 3:22 PM by Flex harUI

    variable row length, verticalscrollbar problem

    rck_Cena77 Level 1

      Hi,

               i had problem with list with variable row height and i implemented the measure method it didn't work.

       

      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(click at bottom didn't work).

       

      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="Somethiing">

       

      <components:itemRenderer>

                  <fx:component>

                       <mx:Grid>

                                <mx:GridRow>......

       

      Thanks for reading.

        • 1. Re: variable row length, verticalscrollbar problem
          Anitha Selvaraj Level 2

          I have also faced this issue few months back. I tried setting the height inside the

          set data method in the itemrenderer component. Something like below,

           

          override public function set data(value:Object):void {
                      super.data = value;
                      if(data != null && data is TestVO)
                          testVO= TestVO(data);
                      if(under some condition) {
                          var noOfPOs:int = this.poList.dataProvider.source.length;
                          if(noOfPOs%5 == 0) {
                              this.height = (noOfPOs/5) * 165;
                          } else {
                              this.height = ((noOfPOs/5) + 1) * 142;
                          }
                      } else {
                          this.height = 165;
                      }
                         
                  }

           

          And this solved both my vertical scroll problem and variable row index problem.

           

          Hope it helps.

           

          Thanks,

          Anitha

          • 2. Re: variable row length, verticalscrollbar problem
            rck_Cena77 Level 1

            thanks for repling,

             

            i didn't understand TestVO in your code, my information is one img in assets and one paragraph  from database,

             

            this paragraph is a variable height, and the last line of the bottom item is not displayed and vscrollbar is not working properly if i increase the fontsize by 1pt everything working ok. but thats not the requirement.

             

            any help anitha.

             

            thank you.

            • 3. Re: variable row length, verticalscrollbar problem
              Flex harUI Adobe Employee

              What does your measure() method look like?

              • 4. Re: variable row length, verticalscrollbar problem
                rck_Cena77 Level 1

                thanks very much for your reply,

                 

                                 i fixed the problem 90%, measure()(measuredheight=top+bottom+some.constant to match the req height) looks same like what you

                 

                describe in one of the forums, and then i changed it to my requirement bychanging the measuredheight, but still when  verticalscrollbar was drag to

                 

                bottom, and if i add the element at the 0th position the gap between two biggest rows in the list is reduced(both are pretty close) looks odd, but if i

                 

                add the element with   verticalscrollbar at the top everything is working fine. what might be the problem??

                 

                 

                thanks to anitha and hard UI for your time.

                • 5. Re: variable row length, verticalscrollbar problem
                  Flex harUI Adobe Employee

                  Is this an mx:List?  The renderers are supposed to use the explicitWidth to

                  determine the measuredHeight.  That means you can't just set percentages on

                  components in the renderer.

                  • 6. Re: variable row length, verticalscrollbar problem
                    rck_Cena77 Level 1

                    yes i used  mx list,

                     

                    measuredHeight=measureHeightOfItems()+viewMetrics.top+viewMetrics.bottom+52;

                     

                     

                    this line makes it to work 90%. do you i have to change this ?????

                     

                    i didn't used explicitwidth at all.

                    • 7. Re: variable row length, verticalscrollbar problem
                      Flex harUI Adobe Employee

                      Are you using default renderers?  Custom renderers must have measure methods

                      that factor in explicitWidth if their measuredHeight depends on it.  All

                      components that word wrap text would need this kinds of custom measure()

                      method.

                      • 8. Re: variable row length, verticalscrollbar problem
                        rck_Cena77 Level 1

                        <Components:AdvancedList

                         

                         

                        variableRowHeight="

                        true"

                        id="

                        legendList"

                        width="

                        560"

                        height="

                        90"

                        x="

                        10"

                        y="

                        10"

                        dataProvider="

                        {_legendItems}"

                        itemsChangeEffect="

                        {listEffect}"

                        selectable="

                        false"

                        borderVisible="

                        false"

                        paddingTop="

                        3"

                        paddingBottom="

                        3"

                        paddingLeft="

                        3"

                        paddingRight="

                        3"

                        verticalScrollBarStyleName="

                        sbTrackStyles"

                        contentBackgroundAlpha="

                        0"

                        offscreenExtraRowsOrColumns="

                        1"

                         

                        >

                         

                        <Components:itemRenderer>

                         

                         

                        <fx:Component>

                         

                         

                        <mx:Grid

                         

                        and the AdvancedList.as is

                         

                        public

                         

                         

                        class AdvancedList extends List

                        {

                         

                        public function AdvancedList()

                        {

                         

                        super();

                         

                        }

                         

                         

                        override protected function measure():void

                        {

                         

                         

                        if((measureHeightOfItems()+viewMetrics.top+viewMetrics.bottom)==0)

                        measuredHeight=100;

                         

                        else

                        measuredHeight=measureHeightOfItems()+viewMetrics.top+viewMetrics.bottom+52;

                        }

                         

                         

                         

                        my problem is if the scrollbar in the list is at the bottom then i add a element or delete a item, then the space between the rows of the two biggest rows is less, how come i overcome that problem.

                        • 9. Re: variable row length, verticalscrollbar problem
                          Flex harUI Adobe Employee

                          I'm just trying to make sure your renderers measure correctly otherwise you

                          have no chance of measureHeightOfItems returning a useful value.

                          • 10. Re: variable row length, verticalscrollbar problem
                            rck_Cena77 Level 1

                            how to make sure renderers are measured correctly ? can you explain in detail. i am not strong in actionscripts.

                            • 11. Re: variable row length, verticalscrollbar problem
                              Flex harUI Adobe Employee

                              As I explained already, you have to use the explicitWidth of the renderer to

                              determine the measuredHeight of the renderer.  How to do that depends on the

                              renderer.

                               

                              If you post the renderer code, maybe someone will help.

                              • 12. Re: variable row length, verticalscrollbar problem
                                rck_Cena77 Level 1

                                i didn't write any renderer code. i googled to override the renderer but didn't find any help, my question which method i have to change(setting the explicitheight).

                                 

                                appreciate your help.

                                • 13. Re: variable row length, verticalscrollbar problem
                                  Flex harUI Adobe Employee

                                  OK, so you are using default renderers and still having problems?  Can you

                                  make up a 20-line test case and post it?

                                  • 14. Re: variable row length, verticalscrollbar problem
                                    rck_Cena77 Level 1

                                    <Components:AdvancedList

                                     

                                    id="legendList" width="560" height="90" x="10" y="10"dataProvider="{_legendItems} temsChangeEffect="{listEffect}"

                                    selectable="false" brderVisible="false" paddingTop="3" paddingBottom="3" paddingLeft="3" verticalScrollBarStyleName="sbTrackStyles"

                                    variableRowHeight="

                                    true"contentBackgroundAlpha="0"offscreenExtraRowsOrColumns="1">

                                     

                                    <Components:itemRenderer>

                                     

                                    <fx:Component>

                                     

                                    <mx:Grid

                                    horizontalGap="

                                    0" ddedEffect="{outerDocument.fadeInLegendItem}"verticalScrollPolicy="off"horizontalScrollPolicy="off">

                                     

                                    <mx:GridRow>

                                     

                                    <mx:GridItem horizontalAlign="left">

                                     

                                    <s:HGroup>

                                     

                                    <mx:Image        

                                     

                                    <s:VGroup>

                                     

                                    <s:RichText fontSize="11" whiteSpaceCollapse="collapse"maxWidth="{(data.ShowGoodGreatPriceIcon || data.ShowInventoryIcon || data.ShowRebateIcon || data.ShowForecastIcon) ? 495 : 540}"><s:content><s:p><s:span color="{((data.ShowRebateIcon) ? 0xBC311D: 0x284B90)}" fontFamily="Arial Bold" textAlign="left">{data.LegendTitle + " "}</s:span><s:span color="0x666666" fontFamily="Arial Bold">{data.LegendBody}</s:span></s:p></s:content> </s:RichText> </s:VGroup>

                                     

                                     

                                    </s:HGroup></mx:GridItem></mx:GridRow>

                                     

                                     

                                    </mx:Grid>

                                     

                                    </fx:Component>

                                     

                                    </Components:itemRenderer>

                                     

                                    </Components:AdvancedList>

                                     

                                    AdvancedList.as  where both itemRenderer and advancedList will refer to:

                                     

                                    package

                                     

                                     

                                    Components

                                    {

                                     

                                    import mx.controls.List;

                                     

                                    import mx.controls.listClasses.IListItemRenderer;

                                     

                                     

                                    public class AdvancedList extends List

                                    {

                                     

                                    public function AdvancedList()

                                    {

                                     

                                    super();

                                    variableRowHeight=

                                    true;

                                    }

                                     

                                     

                                    override protected function measure():void

                                    {

                                     

                                    super.measure();

                                     

                                     

                                     

                                    explicitHeight=measureHeightOfItems()()+viewMetrics.top+viewMetrics.bottom;

                                    }

                                     

                                     

                                     

                                    }

                                    }

                                    • 15. Re: variable row length, verticalscrollbar problem
                                      Flex harUI Adobe Employee

                                      Formatting code for this forum can be tricky.  The mx:Image tag is

                                      incomplete.

                                       

                                      However, you are using custom itemrenderers with flow-based components like

                                      RichText and even a deferred content component like mx:Image.  The RichText

                                      needs to have its width tied to the explicitWidth of the renderer.  The

                                      mx:Image will need to specify some size because at measure time, if it has

                                      external content, that content won't be completely loaded so the measurement

                                      will be incorrect.

                                       

                                      I don't know why you are using mx:Grid.  It doesn't look necessary.  Getting

                                      rid of it might help simply tying the RichText's size to the renderer's

                                      explicitWidth.

                                       

                                      When I ask for a test case, I am looking for about 20 lines I can copy and

                                      paste and run so it would be easier for me if you do post again, to not use

                                      AdvancedList and just simplify to set the right properties on a regular List