[flexcoders] Re: Horizontal scrollbars on a list component populated from a SOAP service

[ria_coder]

--- In flexcoders@yahoogroups.com, "Manish Jethani"
<[EMAIL PROTECTED]> wrote:
>
> On 5/1/07, ria_coder <[EMAIL PROTECTED]> wrote:
> 
> > We have a resizable canvas with a list on it that is populated from a
> > SOAP service (asynchronous call so data is added to list after list is
> > displayed). The list is set to 100% width so that it fills the canvas.
> > If an entry in the list has a length that is greater than the width of
> > the canvas then we would like a horizontal scrollbar to appear.
> > We've tried any number of things but it just doesn't work.
> 
> This works:
> 
> <?xml version="1.0"?>
> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
>   xmlns="*">
>   <mx:Canvas width="100">
>     <mx:List width="100%" horizontalScrollPolicy="on">
>       <mx:dataProvider>
>         <mx:Array>
>           <mx:String>This is a really long piece of text.</mx:String>
>           <mx:String>This is short.</mx:String>
>         </mx:Array>
>       </mx:dataProvider>
>     </mx:List>
>   </mx:Canvas>
> </mx:Application>
> 
> I'm setting the horizontalScrollPolicy to "on". Can you make it *not*
> work (to reproduce your exact case)?
>


Here is the sample code where it doesn't work:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
        xmlns="*">
        
        <mx:Script>
                <![CDATA[
                        [Bindable]
                        private var families : Array;
                        
                        private function populateList() : void{
                                families = new Array(["Short name"], ["A longer 
name with a
scrollbar"], ["A really long name with a scrollbar that goes right
till the end"])
                        }
                ]]>
        </mx:Script>
        

        <mx:Canvas width="100">
                <mx:List width="100%" horizontalScrollPolicy="on"
dataProvider="{families}" creationComplete="populateList()"/>
        </mx:Canvas>
</mx:Application>

I guess the problem is because we populate the list after it has been
created.
Howewer I've been playing with this and I a think I have the solution.
There is an "updateComplete" event that appears to trigger when the
data in the list changes.
I can give the list an id and then use this in the list tag:
updateComplete="{myList.width = myList.measureWidthOfItems()}"

And it does appear to work. When I add additional items to the list it
resizes the scroll bar properly as well. You do have to turn off the
horizontalScrollPolicy on the list or you get multiple scrollbars.
For anyone else here is what I ended up with as  a solution

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
        xmlns="*">
        
        <mx:Script>
                <![CDATA[
                        [Bindable]
                        private var families : Array;
                        
                        private function populateList() : void{
                                families = new Array(["Short name"], ["A longer 
name with a
scrollbar"], ["A really long name with a scrollbar that goes right
till the end"])
                        }
                ]]>
        </mx:Script>
        

        <mx:Canvas width="100">
                <mx:List id="myList" width="100%"
                        horizontalScrollPolicy="off"
                        dataProvider="{families}"
                        creationComplete="populateList()"
                        
updateComplete="{myList.width=myList.measureWidthOfItems()}"
                        />
        </mx:Canvas>
</mx:Application>

It helps to talk things through :)

Thanks for you time.

Adam