4 Replies Latest reply on Oct 27, 2010 8:08 AM by tehxike1

    Complex scrolling question - freeze panes?

    tehxike1 Level 1

      I'm trying to achieve a scrolling effect similar to "freeze panes" in Excel.  I have a large container that will cause scrolling, and want the container to the left of it to scroll vertically with it, and the container above it to scroll horizontally with it.  I don't want either the above or left containers to be scrolled off-screen, so I can't simply slap everything into a single container and make it scroll.

       

      My current plan is to simply dispatch events everywhere so that scrolling the main container vertically will also notify the left container where it should scroll to, and likewise for the top container.  Is there a better way to do this?  It seems simple in concept, but once you start trying to structure it in MXML, it becomes evident that there's no easy way to do it.

       

      Thanks

        • 1. Re: Complex scrolling question - freeze panes?
          rtalton Level 4

          Not clear on whether you want to link the scrolling of two containers--I have an example of doing this, or if you want to move the containers themselves when scrolling an application window.

          • 2. Re: Complex scrolling question - freeze panes?
            tehxike1 Level 1

            Certainly a better explanation than my lousy attempt is to fire up Excel or Google Docs (spreadsheet) and click in B2: freeze rows above, columns to the left.

             

            My attempt at explaining it without the aid: the header container above my main container should never vertically scroll out of view.  It should however line up with the lower container, so scrolling horizontally will cause both my main container and my header container to scroll.  Likewise, the container to the left of my main container should never be scrolled away horizontally.  It should however scroll vertically when the main container scrolls vertically.  This way the rows of the left container always line up with the main container, and the columns of the header container always line up with the main container.

             

            I think scrolling two containers simultaneously is probably exactly what I want- the main container will always have the same width as the container above it, and the same height as the one to the left of it.

            • 3. Re: Complex scrolling question - freeze panes?
              rtalton Level 4

              Ok, if I understand you correctly, you want to link the scrolling of the containers, NOT keep containers in view when scrolling the application window.

               

              Here is code showing how you can link the scroll bars in two containers. It assumes you have scroll bars in the containers and they are always the same height, so I've put in dummy data to accomplish this. Paste it into a new application, run it, and see the scrollbars linked when you click the Link button.

               

              Linking two containers with different lengths of data within is a little trickier, but can also be done.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
              <mx:Script>
                  <![CDATA[
                      import mx.events.ScrollEvent;
                      private function ghostScroll(event:ScrollEvent):void{
                          //Called by scrolling the Data Grid.
                          var dgMaxVertScrollPos:Number = event.target.maxVerticalScrollPosition;
                          var dgCurrentVertScrollPos:Number = event.target.verticalScrollPosition;
                          //Calculate Data Grid's scroll percentage:
                          var dgPercentScroll:Number = dgCurrentVertScrollPos/dgMaxVertScrollPos*100;                       
                          txtDGScrollPos.text = dgPercentScroll.toFixed(2) + '%';
                          if (btnLinkScrolling.selected){
                              //Now calculate/set the Vbox's scroll based on the Data Grid's:
                              vb1.verticalScrollPosition = vb1.maxVerticalScrollPosition * (dgPercentScroll/100);               
                          }
                      }
                  ]]>
              </mx:Script>   
                <mx:ArrayCollection id="rowNumbers">
                   <mx:Object>
                      <mx:RowID>1</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>3</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>4</mx:RowID>
                   </mx:Object>     
                   <mx:Object>
                      <mx:RowID>5</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>6</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>7</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>8</mx:RowID>
                   </mx:Object>     
                   <mx:Object>
                      <mx:RowID>9</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>10</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>11</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>12</mx:RowID>
                   </mx:Object>     
                   <mx:Object>
                      <mx:RowID>13</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>14</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>15</mx:RowID>
                   </mx:Object>
                   <mx:Object>
                      <mx:RowID>16</mx:RowID>
                   </mx:Object>     
                   <mx:Object>
                      <mx:RowID>17</mx:RowID>
                   </mx:Object>              
                </mx:ArrayCollection>
                   
                  <mx:VBox id="vb1" x="10" y="10" height="200" width="150">
                      <mx:TextArea width="100%" height="300" verticalScrollPolicy="off">
                          <mx:text>Lorem ipsum an homero habemus euripidis vim, per id amet appareat perfecto, mea stet iudico ornatus ad. His movet semper moderatius id, nullam fierent albucius no his, has at vivendum maiestatis reformidans. Odio dicant eu vis. Vis in erat sale adversarium, blandit vituperatoribus definitiones ut vix. Pri id numquam consequat, movet prodesset id vel.</mx:text>
                      </mx:TextArea>
                  </mx:VBox>
                  <mx:Label x="10" y="218" text="VBox scroll Position:"/>
              <!-- The inline If statement is only used to suppress displaying "NaN" when app first opens-->
              <!-- This could also be set in ActionScript using the Vbox's scroll event. -->   
                  <mx:Text text="{(vb1.verticalScrollPosition/vb1.maxVerticalScrollPosition*100).toString() != 'NaN' ? (vb1.verticalScrollPosition/vb1.maxVerticalScrollPosition*100).toFixed(2)+'%': '0.00%'}" x="10" y="244" textAlign="right" width="80" height="18"/>
                 
                  <mx:DataGrid id="dg" dataProvider="{rowNumbers}" x="294" y="10" height="200"
                      scroll="{ghostScroll(event)}" >
                      <mx:columns>
                          <mx:DataGridColumn dataField="RowID"/>
                      </mx:columns>   
                  </mx:DataGrid>  

               

                  <mx:Label x="294" y="218" text="DataGrid Scroll Position:"/>
                  <mx:Text id="txtDGScrollPos" x="294" y="242" textAlign="right" width="80" height="18"/>
                  <mx:Button id="btnLinkScrolling" x="168" y="81" label="&lt;Link Scrolling&lt;" toggle="true"/>
                  <mx:TextArea x="168" y="10" text="Click button to link the VBox's scroll position to the Data Grid's." width="118" height="63" alpha="0.0" textAlign="center"/>
              </mx:Application>

              • 4. Re: Complex scrolling question - freeze panes?
                tehxike1 Level 1

                Thanks, that's exactly what I was looking for.