CODEWITHSUNDEEP
apache-flexlayout
BlueDolphin
BlueDolphin

Reputation: 9765

How to arrange Flex component to scroll properly

In following code, I have one large component, and I'd like only the level4 panel to be scrollable, but instead, the whole application become scrollable.

Any suggestion ? Thanks

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel width="100%" height="100%" title="level1">
    <mx:Panel width="100%" height="100%" title="level2">
        <mx:HDividedBox width="100%" height="100%">

            <mx:TextArea width="200" height="100%"/>
            <mx:Panel width="100%" height="100%" title="level3">
                <mx:ApplicationControlBar width="100%" dock="true">
                    <mx:Spacer width="30"/>
                    <mx:LegendItem  width="80" height="20" fill="#CC9900" label="test1"/>

                </mx:ApplicationControlBar>
                <mx:Panel width="100%" height="100%" title="level4">
                    <mx:UIComponent width="2000" height="2000"/>
                </mx:Panel>
            </mx:Panel>
        </mx:HDividedBox>
    </mx:Panel>
</mx:Panel>
</mx:Application>

If I set ScrollPolicy, then no scrollbar will be shown up. Please check the following, thanks.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Panel width="100%" height="100%" title="level1" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Panel width="100%" height="100%" title="level2" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:HDividedBox width="100%" height="100%">

            <mx:TextArea width="200" height="100%"/>
            <mx:Panel width="100%" height="100%" title="level3" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                <mx:ApplicationControlBar width="100%" dock="true">
                    <mx:Spacer width="30"/>
                    <mx:LegendItem  width="80" height="20" fill="#CC9900" label="test1"/>

                </mx:ApplicationControlBar>
                <mx:Panel width="100%" height="100%" title="level4" horizontalScrollPolicy="auto"  verticalScrollPolicy="auto">
                    <mx:UIComponent width="2000" height="2000"/>
                </mx:Panel>
            </mx:Panel>
        </mx:HDividedBox>
    </mx:Panel>
</mx:Panel>
</mx:Application>

Upvotes: 0

Views: 536

Answers (2)

CygnusTX
CygnusTX

Reputation: 20

Set layout="absolute" for the level4 panel.

Upvotes: 1

Sam DeHaan
Sam DeHaan

Reputation: 10325

You can change the value of .verticalScrollBarPolicy for each Panel, setting it to "off" for the Panels that should not scroll, and to "on" or "auto" for the Panels that should scroll. There is also a .horizontalScrollBarPolicy parameter if you need that as well.

Upvotes: 0

Related Questions