10 Replies Latest reply on Apr 12, 2011 6:04 PM by tooMuchTrouble

    scroll a datagroup?

    tooMuchTrouble Level 3

      i have a TitleWindow popup that holds a DataGroup w/a tile layout wrapped in a Scroller. no matter what i try, can't get the datagroup to scroll to save my life. tried setting the scroller  to a 1x1x1x viewport, turning off the clip & enable scrolling option, etc. no joy. it's basically this:

       

       

      <s:HGroup horizontalAlign="right">

      <mx:Spacer width="500"/>

      <s:CheckBox id="selectAll" label="Select all" change="setSelectAll();" color="#E64141" />

      </s:HGroup>

      <s:Scroller verticalScrollPolicy="auto" id="aScroller">

      <s:DataGroup id="contactsDG" dataProvider="{uberContacts}" itemRenderer="renderers.ContactListRenderer"

        height="400" width="100%" clipAndEnableScrolling="true">

      <s:layout>

        <s:TileLayout horizontalAlign="left" horizontalGap="10" verticalGap="10" columnWidth="150" orientation="rows"

          requestedColumnCount="3" rowAlign="top" verticalAlign="top" rowHeight="25" useVirtualLayout="false"

          columnAlign="left" requestedRowCount="50" clipAndEnableScrolling="true"/>

        </s:layout>

      </s:DataGroup>

      </s:Scroller>

      <s:HGroup width="100%" height="25" horizontalAlign="center">

      <s:Button label="Done" click="processContacts();/>

      <s:Button label="Cancel" click="cleanUp();"/>

      </s:HGroup>


       

      any ideas?

       

      thanks.

       

      Message was edited by: PaulH

        • 1. Re: scroll a datagroup?
          Flex harUI Adobe Employee

          I don't see anything forcing the Scroller to be smaller than the DataGroup.

          Setting minHeight=0 on the scroller will help, but you probably need at

          least one more constraint.

          • 2. Re: scroll a datagroup?
            tooMuchTrouble Level 3

            not getting much joy on adding more layout constraints (either via more containers, removing any with 100% sizeing, etc.). i guess i'm just in a conceptual desert as far as flex 4 scrolling goes, can you point me to simple(r) resources?

             

            thanks.

            • 3. Re: scroll a datagroup?
              Flex harUI Adobe Employee

              Typically you would add constraints to the Scroller by setting

              left/right/top/bottom or percentWidth/percentHeight, then set

              minWidth/minHeight to a number like 0.

               

              Otherwise the scroller gets the same size as its content and then it won't

              have any need to show a scrollbar.

              • 4. Re: scroll a datagroup?
                tooMuchTrouble Level 3

                yes that was what i understood the scroller needed (ie i tried setting the viewport to 1x1x1x1) but still no joy.

                 

                any chance it's the TileLayout (though that seems straight forward enough)?

                 

                 

                ps: there's no percentWidth,percentHeight on a Scroller.

                • 5. Re: scroll a datagroup?
                  Flex harUI Adobe Employee

                  It is most likely the attributes or lack of attributes on the Scroller.  It

                  is pretty hard to help you if you can't show us the relevant code.

                  • 6. Re: scroll a datagroup?
                    tooMuchTrouble Level 3

                    uh, ok:

                     

                    <s:HGroup horizontalAlign="right">

                    <mx:Spacer width="500"/>

                    <s:CheckBox id="selectAll" label="Select all" change="setSelectAll();" color="#E64141" />

                    </s:HGroup>

                    <s:Scroller id="aScroller" minHeight="0" left="1" right="1" top="1" bottom="1">

                    <s:DataGroup id="contactsDG" dataProvider="{uberContacts}" itemRenderer="renderers.ContactListRenderer"

                      height="400" width="100%" clipAndEnableScrolling="true">

                    <s:layout>

                      <s:TileLayout horizontalAlign="left" horizontalGap="10" verticalGap="10" columnWidth="150" orientation="rows"

                        requestedColumnCount="3" rowAlign="top" verticalAlign="top" rowHeight="25" useVirtualLayout="false"

                        columnAlign="left" requestedRowCount="50" clipAndEnableScrolling="true"/>

                      </s:layout>

                    </s:DataGroup>

                    </s:Scroller>

                    <s:HGroup width="100%" height="25" horizontalAlign="center">

                    <s:Button label="Done" click="processContacts();/>

                    <s:Button label="Cancel" click="cleanUp();"/>

                    </s:HGroup>

                     

                    this is what the popup looks like w/useVirtualLayout=false (in the TileLayout), 36 out of 42 records, no scrolling.

                    noVirtualLayout.jpg

                     

                    and this is it w/useVirtualLayout=true, viewport is tiny as specified but no scrolling either:

                    hasVirtualLayout.jpg

                    • 7. Re: scroll a datagroup?
                      Flex harUI Adobe Employee

                      In both pictures, the popup is the same size.  For some reason, you don't

                      want to show us the entire popup code, so we can only guess what is going

                      on, but it looks like the scroller is always going to be about the size of

                      the popup, and if the popup is around 400 pixels high, then it doesn't have

                      any reason to show scrollbars for the DataGroup.

                      • 8. Re: scroll a datagroup?
                        tooMuchTrouble Level 3

                        no i don't have any reason not to show you that but didn't think it was relative, i thought the scroller was what controlled the DataGroup scrolling:

                         

                         

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

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

                           xmlns:mx="library://ns.adobe.com/flex/mx"

                           width="550" height="450"   

                           creationComplete="PopUpManager.centerPopUp(this);"

                           close="PopUpManager.removePopUp(this);"

                           title="{groupTitle} ({contactCount} contacts)">

                        <s:layout>

                        <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" horizontalAlign="center"

                        verticalAlign="top" clipAndEnableScrolling="true"/>

                        </s:layout>

                         

                        <fx:Script>

                        <![CDATA[

                        import mx.collections.ArrayCollection;

                        import mx.events.CloseEvent;

                        import mx.managers.PopUpManager;

                         

                         

                        [Bindable] public var uberContacts:ArrayCollection;

                        [Bindable] public var contactCount:int;

                        [Bindable] public var groupTitle:String="";

                         

                         

                        private function cleanUp():void {

                        selectAll.selected=false;

                        setSelectAll();

                        PopUpManager.removePopUp(this);

                        }

                         

                         

                        private function processClose():void {

                        // WTF isn't the removePopUp() firing a CloseEvent?

                        dispatchEvent(new CloseEvent(CloseEvent.CLOSE));

                        PopUpManager.removePopUp(this);

                        }

                         

                         

                        private function setSelectAll():void {

                        var item:Object;

                        for (var i:int=0; i < uberContacts.length; i++) {

                          item=uberContacts.getItemAt(i);

                          item.selectContact=selectAll.selected;

                          uberContacts.itemUpdated(item);

                        }

                        uberContacts.refresh();

                        }

                         

                        ]]>

                        </fx:Script>

                         

                         

                        s:HGroup horizontalAlign="right">

                        <mx:Spacer width="500"/>

                        <s:CheckBox id="selectAll" label="Select all" change="setSelectAll();" color="#E64141" />

                        </s:HGroup>

                        <s:Scroller id="aScroller" minHeight="0" left="1" right="1" top="1" bottom="1">

                        <s:DataGroup id="contactsDG" dataProvider="{uberContacts}" itemRenderer="renderers.ContactListRenderer"

                          height="400" width="100%" clipAndEnableScrolling="true">

                        <s:layout>

                          <s:TileLayout horizontalAlign="left" horizontalGap="10" verticalGap="10" columnWidth="150" orientation="rows"

                            requestedColumnCount="3" rowAlign="top" verticalAlign="top" rowHeight="25" useVirtualLayout="false"

                            columnAlign="left" requestedRowCount="50" clipAndEnableScrolling="true"/>

                          </s:layout>

                        </s:DataGroup>

                        </s:Scroller>

                        <s:HGroup width="100%" height="25" horizontalAlign="center">

                        <s:Button label="Done" click="processContacts();/>

                        <s:Button label="Cancel" click="cleanUp();"/>

                        </s:HGroup>

                        s:HGroup horizontalAlign="right">

                        <mx:Spacer width="500"/>

                        <s:CheckBox id="selectAll" label="Select all" change="setSelectAll();" color="#E64141" />

                        </s:HGroup>

                        <s:Scroller id="aScroller" minHeight="0" left="1" right="1" top="1" bottom="1">

                        <s:DataGroup id="contactsDG" dataProvider="{uberContacts}" itemRenderer="renderers.ContactListRenderer"

                          height="400" width="100%" clipAndEnableScrolling="true">

                        <s:layout>

                          <s:TileLayout horizontalAlign="left" horizontalGap="10" verticalGap="10" columnWidth="150" orientation="rows"

                            requestedColumnCount="3" rowAlign="top" verticalAlign="top" rowHeight="25" useVirtualLayout="false"

                            columnAlign="left" requestedRowCount="50" clipAndEnableScrolling="true"/>

                          </s:layout>

                        </s:DataGroup>

                        </s:Scroller>

                        <s:HGroup width="100%" height="25" horizontalAlign="center">

                        <s:Button label="Done" click="processContacts();/>

                        <s:Button label="Cancel" click="cleanUp();"/>

                        </s:HGroup>

                        • 9. Re: scroll a datagroup?
                          Flex harUI Adobe Employee

                          I doubt this code compiles since there are more than one child with the same

                          id.  Please be careful when posting code.  However it looks like:

                           

                          The TitleWindow is defined to be 550x450.

                           

                          Therefore, the Scroller will net out to about 520x420 or more.

                           

                          The DataGroup height is 400, so no scrollbars are needed.

                           

                          The scroller will only show scrollbars if its child is taller or wider than

                          it is.

                          • 10. Re: scroll a datagroup?
                            tooMuchTrouble Level 3

                            sorry about that, copied & pasted once too often.

                             

                            this didn't work (originally thought it had, but was seeing cached version using a List instead of a DataGroup):

                             

                            <s:Scroller id="aScroller" minHeight="0" left="1" right="1" top="1" bottom="1" height="400" width="100%">

                            <s:DataGroup id="contactsDG" dataProvider="{uberContacts}" itemRenderer="renderers.ContactListRenderer"

                              height="405" width="100%" clipAndEnableScrolling="true">

                              <s:layout>

                               <s:TileLayout horizontalAlign="left" horizontalGap="10" verticalGap="10" columnWidth="150" orientation="rows"

                                requestedColumnCount="3" rowAlign="top" verticalAlign="top" rowHeight="25" useVirtualLayout="false"

                                columnAlign="left" requestedRowCount="50" clipAndEnableScrolling="true"/>

                              </s:layout>

                            </s:DataGroup>

                            </s:Scroller>

                             

                            the DataGroup is exactly taller than the Scroller but what i see is no scrollbars & the bottom buttons chopped off.

                             

                            obviously i need to re-learn layout/constraints but in the meantime i'll use a List.

                             

                            thanks and again sorry about the extra hassle.

                             

                            Message was edited by: PaulH