1 Reply Latest reply on Sep 27, 2009 7:32 AM by Pimenov Oleg

    how to use the Spark VScrollbar


      I am trying out the spark components, and i am new to flex. what i do not understand is how to use the spark scrollbars. for example in the code below how do i associate the VScrollbar "bar" to scroll the content in the VGroup "exmp".



      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                @namespace s "library://ns.adobe.com/flex/spark";
                /* Custom style which lets you style Panels by setting the styleName property. */
                .customPanel {
                     skinClass: ClassReference("skins.CustomPanelSkin");
                     contentBackgroundColor: haloGreen ;
                /* Advanced CSS which lets you style individual objects by id. */
                     s|Panel #panel4 {
                     skinClass: ClassReference("skins.CustomPanelSkin");
                     contentBackgroundColor: haloOrange;
                /* Or, to style ALL Spark Panels globally... */
                     s|Panel {
                     skinClass: ClassReference("skins.CustomPanelSkin");
                <s:VGroup id="exmp" horizontalCenter="0" verticalCenter="0" height="300" clipAndEnableScrolling="true">
                     <s:Panel title="Spark Panel #1" width="150">
                          <s:SimpleText text="I'm a Panel with no styling." percentWidth="100" />
                     <s:Panel title="Spark Panel #2" styleName="customPanel" width="150">
                          <s:SimpleText text="I'm a Panel with styleName defined." percentWidth="100" />
                          <s:VScrollBar id="bar2" height="100%"/>
                     <s:Panel title="Spark Panel #3" skinClass="skins.CustomPanelSkin" contentBackgroundColor="0xFF0000" width="150">
                          <s:SimpleText text="I'm a Panel with a skinClass defined." percentWidth="100" />
                     <s:Panel id="panel4" title="Spark Panel #4" width="150">
                          <s:SimpleText text="I'm a Panel with a styling from CSS." percentWidth="100" />
                     <s:TextArea text="Spark TextArea" contentBackgroundColor="red" />
                     <s:TextInput text="Spark TextInput" contentBackgroundColor="haloOrange" />
                     <s:Button label="Spark Button" baseColor="yellow" />
                     <mx:TextArea text="Halo TextArea" contentBackgroundColor="haloGreen" />
                     <mx:Panel title="Halo Panel" contentBackgroundColor="haloBlue" width="300" height="200" />
                     <mx:Button label="Halo Button" baseColor="purple" />
                <s:VScrollBar id="bar" height="100%"/>



      I searched a lot of documentation and the forums, but can't seem to find the solution to achieve this seemingly simple objective. Will be grateful for any help. Thanks.