Setting a Flex container’s vertical scroll policy

by Peter deHaan on November 9, 2007

in VBox

The following example shows how you can use the verticalScrollPolicy property on a Flex VBox container to control the appearance of the vertical scroll bar when the container’s contents exceed the dimensions of the container.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/09/setting-a-flex-containers-vertical-scroll-policy/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function updateScrollPosition():void {
                vSP.text = vBox.verticalScrollPosition.toString();
                mVSP.text = vBox.maxVerticalScrollPosition.toString();
            }
        ]]>
    </mx:Script>
 
    <mx:Style>
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="verticalScrollPolicy:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="auto" />
                            <mx:Object label="on" />
                            <mx:Object label="off" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="height:">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="300"
                        value="50"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="50" />
            </mx:FormItem>
            <mx:FormItem label="verticalScrollPosition:">
                <mx:Label id="vSP" />
            </mx:FormItem>
            <mx:FormItem label="maxVerticalScrollPosition:">
                <mx:Label id="mVSP" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:VBox id="vBox"
            verticalScrollPolicy="{comboBox.selectedItem.label}"
            backgroundColor="haloSilver"
            width="200"
            height="200"
            updateComplete="updateScrollPosition();"
            creationComplete="updateScrollPosition();">
        <mx:Box id="box"
                backgroundColor="haloBlue"
                width="100%"
                height="{slider.value}" />
    </mx:VBox>
 
</mx:Application>

View source is enabled in the following example.

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: