4 Replies Latest reply on Oct 24, 2011 1:02 PM by FM_Flame

    Flex 4.5 What is the use of List verticleLayout rowHeight property ??

    FM_Flame Level 1

      I've just used this as a set up:

       

      A List with a skin with datagroup and a VScrollBar in it.

       

      On the datagroup verticleLayout I set variableRowHeight to false and rowHeight to 43.

       

      I have 8 items in my dataProvider but less can be seen in the list = the VScrollBar should be active and be able to scroll.

       

      Unless I set a fixed height to 43 of my ItemRenderer the VScrollbar is bugged and doesn't allow scrolling as if there were no items in my List.

      My ItemRenderer is very simple just a group with 100% height (which should fill the rowHeight specified but doesn't) and 100% width and rect in it so I can see the item in the list. And I do see them up to where the list height ends. The rest I can't, cause I can't scroll, which means that the viewport measures wrongly the itemRenderers.

       

      Isn't setting variableRowHeight to false and rowHeight to a fixed number supposed to automatically set the height of each itemRenderer to whatever the rowHeight property has ? Or why should I use that property if then the itemRenderer doesn't get this height and screws up it's measurement ?

       

      It's very simple to test, here is the list skin code to use:

       

      <s:HGroup width="100%" height="100%" gap="0">

                 

                  <s:DataGroup id="dataGroup" width="100%" height="100%" clipAndEnableScrolling="true"

                                       itemRenderer="spark.skins.wireframe.DefaultItemRenderer">

                      <s:layout>

                          <s:VerticalLayout gap="0" variableRowHeight="false" rowHeight="43" horizontalAlign="contentJustify" />

                      </s:layout>

                  </s:DataGroup>

                

              <s:VScrollBar viewport="{dataGroup}" width="17" height="{dataGroup.height}"

                            skinClass="ContactListVScrollBarSkin" />

       

          </s:HGroup>

       

      Anyone ?

        • 1. Re: Flex 4.5 What is the use of List verticleLayout rowHeight property ??
          Shongrunden Adobe Employee

          This seems to work for me, does it work for you?

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                 xmlns:s="library://ns.adobe.com/flex/spark">

           

              <s:HGroup width="100%" height="100%" gap="0">

                 

                  <s:DataGroup id="dataGroup" width="100%" height="100%" clipAndEnableScrolling="true"

                               itemRenderer="spark.skins.wireframe.DefaultItemRenderer">

                      <s:layout>

                          <s:VerticalLayout gap="0" variableRowHeight="false" rowHeight="43" horizontalAlign="contentJustify" />

                      </s:layout>

                      <s:dataProvider>

                          <s:ArrayList>

                              <s:source>

                                  [0,1,2,3,4,5,6,7,8,9]

                              </s:source>

                          </s:ArrayList>

                      </s:dataProvider>

                  </s:DataGroup>

                 

                  <s:VScrollBar viewport="{dataGroup}" width="17" height="{dataGroup.height}" />

                 

              </s:HGroup>

          </s:Application>

          If not can you provide a complete sample application like this that demonstrates it?

          • 2. Re: Flex 4.5 What is the use of List verticleLayout rowHeight property ??
            FM_Flame Level 1

            Hi Shongrounden, sry for the late reply. You know how it is with time But better late then never! So here are the 2 examples - 3 bugs - 1 old, 2 new:

             

            Both examples are with view source so you can test fast

             

            1) http://www.nedyalkov.net/filip/flex_projects_tests/ListVScrollBarTest2/

            Note: this example is based on dataGroup not List.

             

            Scroll to the bottom (don't use mouse wheel) - > now hover over any of the 4 white areas (that's where the gap is -> handled by the skin) -> try the mouse wheel to go up. It won't work. If you try it on the first gaps it will work till some point you go down it won't. That's from Flex 4.1 and I reported this bug, just saying not fixed yet...

             

            2) http://www.nedyalkov.net/filip/flex_projects_tests/ListVScrollBarTest/

            Note: this example is based on List cause the problem comes when useVirtualLayout="true".

             

            I explained about the old bug and since I didn't want it to mess up this test case I didn't use it here gap is 0. Each ItemRenderer is a back rectangle 100% width/height. As you see the scroll doesn't work but it should cause there is a lot to scroll there. If I set gap then the scroller can be scrolled but just by the height of the sum of gaps... The only way you can scroll with this bugged scroller is to drag the scollerThumb if you can see it at all. When you drag it down the scrollerThumb shrinks as more itemRenderers pop up and when you "discover" them all you can scroll normally.

             

            UPDATE: White writing this I tested and turned out that it's cause of the useVirtualLayout="true" (by default). But no matter I have variableRowHeight="false" and rowHeight="100" ... the scroller gets messed up...

             

            Well I think you pretty much got the idea of what's bugged now

             

            Note: If you add <s:Label text="{data}" /> to the CustomIR along with the Rect I have there = bug is fixed... Scroller calculates everything nice. I tried also to put <s:Group /> doesn't fix the bug... so I am not sure which exactly are the magical components that fix this bug

            UPDATE on the Note: Even with the magical label there still the scroller doesn't properly calculate the total height of the viewport based on the items * rowHeight when variableRowHeight="false" and useVirtualLayout="true" - meaning you have to scroll down to see the scroller shrinking while normally it should calculate approximately or in this case precisely it's height.

             

            3) In Case 2) if you  set a gap="20" for example... there is a gap before the first itemRenderer... should not be there...

             

            Note: Again - If you add <s:Label text="{data}" /> to the CustomIR along with the Rect I have there = bug is fixed...

             

            That's it Shongrunden I hope this helps!

            • 3. Re: Flex 4.5 What is the use of List verticleLayout rowHeight property ??
              Shongrunden Adobe Employee

              1) Can you remind me which bug number this was?

               

              2) I was able to reproduce this in 4.0.0 and 4.5.1, but this appears fixed in the latest 4.6 builds.  Here's a simplified case:

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                               xmlns:s="library://ns.adobe.com/flex/spark">

               

                        <s:List width="100%" height="300">

                                  <s:layout>

                                            <s:VerticalLayout gap="0" variableRowHeight="false" rowHeight="100" horizontalAlign="contentJustify" />

                                  </s:layout>

                      <s:itemRenderer>

                          <fx:Component>

                              <s:ItemRenderer autoDrawBackground="false">

                                  <s:Rect width="100%" height="100%">

                                      <s:fill>

                                          <s:SolidColor color="{0xFF0000 - itemIndex * 10}" />

                                      </s:fill>

                                  </s:Rect>

                              </s:ItemRenderer>

                          </fx:Component>

                      </s:itemRenderer>

                                  <s:dataProvider>

                                            <s:ArrayList>

                                                      <s:source>

                                                                [0,1,2,3,4,5,6,7,8,9,0,1,2,3]

                                                      </s:source>

                                            </s:ArrayList>

                                  </s:dataProvider>

                        </s:List>

               

              </s:Application>

               

              3) This also appears fixed in the latest 4.6 builds.

               

              Are you on the Flex 4.6 pre-release program?  Can you try the latest build and let me know if these issues are fixed for you as well?

              • 4. Re: Flex 4.5 What is the use of List verticleLayout rowHeight property ??
                FM_Flame Level 1

                Hi, thanks for the reply

                 

                1) http://bugs.adobe.com/jira/browse/SDK-29609 - here is the bug number you wanted

                 

                It would be great if they are fixed in 4.6 builds. I will surely test when I get my hands on 4.6 and start working with it and let you know here. Sorry I don't have the time now to look into the pre-release program, i am currently working on a several freelance projects and time is short. Would be very nice if adobe could hire me to test and debug I am good at that

                 

                I won't forget to let you know as soon as I test this.

                 

                Best regards,

                Filip Nedyalkov