9 Replies Latest reply on May 27, 2010 12:43 AM by Shibby4444

    Scroll only in outmost component

    Shibby4444

      Hi there,

       

      I've made an application which has the following component hierarchy.

       

      <mx:Application layout="vertical" height="100%" width="100%">

           <mx:Hbox height="50" />

           <myNs:CustomComp width="100%" height="100%"/>

      </mx:Application>

       

      CustomComp has the following (the data is grabbed from the server using AMFPHP/Zend AMF):

       

      <mx:VBox height="100%" width="100%">

           <mx:DataGrid id="exerciseListTable" width="100%"
                       verticalScrollPolicy="off"
                       dataProvider="{dataReceivedFromBackend}">

      </mx:VBox>

       

      I want scrollbars only in the outmost component, which means only the application level should show the scrollbars. If I tell CustomComp to verticalScrollPolicy="off" it's contents are clipped and the Application component doesn't show a scrollbar to overcome that clipping.

       

      Any ideas on how to do this?

       

      Thanks in advance.

        • 1. Re: Scroll only in outmost component
          BhaskerChari Level 4

          Hi,

           

          In your CustomComp put height="{dg.measureHeightOfItems(0, dp.length) + dg.headerHeight}" in your DataGrid

           

          Put verticalScrollPolicy="off" for VBox and DataGrid in your custom component..

          Here dg is DataGrid id and dp is DataGrid Dataprovider.

          If you are populating your dataprovider dynamically then put the line of code in actionscript as shown below.

          Once your dataprovider is populated call the below.

           

          private function resizeDatagrid():void
          {               
             dg.height = dg.measureHeightOfItems(0, dp.length) + dg.headerHeight;
          }

           

           

          Use this at only one place...either in DataGrid tag or else in Action Script block...as explained above.

           

          If this post answers your question or helps, please mark it as such.

           

          Thanks,

          Bhasker Chari

          • 2. Re: Scroll only in outmost component
            Flex harUI Adobe Employee

            I think if you size the DG to show all of its rows it should just work.

            There are past discussions on how to use measureHeightOfItems to do that.

            • 3. Re: Scroll only in outmost component
              Shibby4444 Level 1

              It didn't work.

               

              I'll put the component hierarchy in more detail to see if that sheds some light to the matter.

               

              <mx:Application>

                   <mx:HBox id="header" width="100%"/>

                   <mx:HBox id="navigation" width="100%"/>

                   <mx:HBox id="body" verticalScrollPolicy="off" height="100%" width="100%">

                        <mx:ViewStack id="contentViewstack" width="100%" height="100%">

                             <mx:HBox id="theBoxWithTheDatagrid" width="100%" height="100%" verticalScrollPolicy="off">

                                  <mx:DataGrid width="100%" height="100%" editable="false" selectable="false" verticalScrollPolicy="off"

                                                       sortableColumns="false" draggableColumns="false" headerHeight="0" dataProvider="{_dataProvider}">

                                  <mx:columns>
                                         <mx:DataGridColumn itemRenderer="customtItem"/> //This component is an HBox and has it's height="90" setted
                                  </mx:columns>

                                  </mx:DataGrid>

                             </mx:HBox>

                             <mx:HBox id="otherStuff"/>

                        </mx:ViewStack>

                   </mx:HBox>

              </mx:Application>

               

              When _dataProvider is updated I launch the reziseDatagrid function you posted, but it doesn't work.

               

              Thanks again.

              • 4. Re: Scroll only in outmost component
                BhaskerChari Level 4

                Hi,

                 

                Post your total code ... I dont see any where in your code where you are calling the reziseDatagrid function...

                 

                Whether your datagrid resized to show all the rows without any scroll...?

                 

                 

                Thanx,

                Bhasker Chari

                • 5. Re: Scroll only in outmost component
                  Shibby4444 Level 1

                  As you wish,

                   

                  <mx:Application creationComplete="onComplete()">

                       <mx:Script>

                            <![CDATA[

                   

                                 import model.Model;

                                 import mx.collections.ArrayCollection;

                   

                                 [Bindable] private var _dataProvider:ArrayCollection;

                   

                                 private function onComplete():void{

                                      retrieveExercises();

                                 }

                   

                                 private function retrieveExercises():void{
                                      new ExerciseEvent(ExerciseEvent.GET_EXERCISES).dispatch();
                                 }

                   

                                 //Called when the data is received on the application's model

                                 public function set onExercisesRetrieved(value:Boolean):void{
                                      _dataProvider=Model.getInstance().availableExercises;
                                      resizeDatagrid();
                                 }

                                 private function resizeDatagrid():void
                                 {               
                                     
                  exerciseListTable.height = exerciseListTable.measureHeightOfItems(0, _dataProvider.length) + exerciseListTable.headerHeight;
                                 }

                            ]]>

                       </mx:Script>

                       <mx:Binding source="{Model.getInstance().dataRetrieved"
                                          destination="this.onExercisesRetrieved"/>

                       <mx:HBox id="header" width="100%"/>

                       <mx:HBox id="navigation" width="100%"/>

                       <mx:HBox id="body" verticalScrollPolicy="off" height="100%" width="100%">

                            <mx:ViewStack id="contentViewstack" width="100%" height="100%">

                                 <mx:HBox id="theBoxWithTheDatagrid" width="100%" height="100%" verticalScrollPolicy="off">

                                      <mx:DataGrid id="exerciseListTable" width="100%" height="100%" editable="false" selectable="false" verticalScrollPolicy="off"

                                                           sortableColumns="false" draggableColumns="false" headerHeight="0" dataProvider="{_dataProvider}">

                                      <mx:columns>
                                             <mx:DataGridColumn itemRenderer="customtItem"/> //This component is an HBox and has it's height="90" setted
                                      </mx:columns>

                                      </mx:DataGrid>

                                 </mx:HBox>

                                 <mx:HBox id="otherStuff"/>

                            </mx:ViewStack>

                       </mx:HBox>

                  </mx:Application>

                   

                  There it is. I'm using Cairngorm and binding to notify the changes in the model. Hope you can figure something now.

                   

                  Thanks.

                  • 6. Re: Scroll only in outmost component
                    BhaskerChari Level 4

                    Hi,

                     

                    Paste this whole code in your application file ...and check if this problem still persists please let me know...

                     

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onComplete()">
                         <mx:Script>
                              <![CDATA[
                                   import model.Model;
                                   import mx.collections.ArrayCollection;

                     

                                   [Bindable] private var _dataProvider:ArrayCollection;

                     

                                   private function onComplete():void{

                     

                                        retrieveExercises();

                     

                                   }

                     

                                   private function retrieveExercises():void{
                                        new ExerciseEvent(ExerciseEvent.GET_EXERCISES).dispatch();
                                   }

                     

                                   //Called when the data is received on the application's model

                     

                                   public function set onExercisesRetrieved(value:Boolean):void{
                                        _dataProvider=Model.getInstance().availableExercises;
                                        resizeDatagrid();
                                   }

                     

                                   private function resizeDatagrid():void
                                   {              
                                        exerciseListTable.height = exerciseListTable.measureHeightOfItems(0, _dataProvider.length) + exerciseListTable.headerHeight;
                                   }

                     

                              ]]>

                     

                         </mx:Script>

                     

                         <mx:Binding source="{Model.getInstance().dataRetrieved"
                                            destination="this.onExercisesRetrieved"/>

                     

                         <mx:HBox id="header" width="100%"/>

                     

                         <mx:HBox id="navigation" width="100%"/>

                     

                         <mx:HBox id="body" verticalScrollPolicy="off" width="100%">

                     

                              <mx:ViewStack id="contentViewstack" width="100%" resizeToContent="true">

                     

                                   <mx:HBox id="theBoxWithTheDatagrid" width="100%" verticalScrollPolicy="off">

                     

                                        <mx:DataGrid id="exerciseListTable" width="100%" editable="false" selectable="false" verticalScrollPolicy="off"

                     

                                         sortableColumns="false" draggableColumns="false" headerHeight="0">

                     

                                        <mx:columns>
                                               <mx:DataGridColumn itemRenderer="customtItem"/> //This component is an HBox and has it's height="90" setted
                                        </mx:columns>

                     

                                        </mx:DataGrid>

                     

                                   </mx:HBox>

                     

                                   <mx:HBox id="otherStuff"/>

                     

                              </mx:ViewStack>

                     

                         </mx:HBox>

                     

                    </mx:Application>

                     

                     

                    If this post answers your question or helps, please kindly mark it as such.

                     

                     

                    Thanks,

                     

                    Bhasker Chari

                    • 7. Re: Scroll only in outmost component
                      Shibby4444 Level 1

                      If I manually state the height on the resizeDataGrid method the component is sized to that height and the scrollbar is correctly displayed on the outmost component:

                       

                           exerciseListTable.height = 2000;

                       

                       

                       

                      So, the problem seems to be on the measureHeightOfItems(0, _dataProvider.length).

                       

                      I've checked that _dataProvider.length is correct when calling the method and here's the code of the customItem renderer. As you can see, I clearly state it's height on the topmost tag.

                       

                      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
                               paddingTop="4"
                               paddingBottom="4"
                               paddingLeft="8"
                               paddingRight="8"
                               verticalAlign="middle"
                               height="98"
                               creationComplete="completeHandler()">

                       

                          <mx:Image id="thumbnail"
                                    scaleContent="true"
                                    source="thumbnail.png"
                                    autoLoad="true"
                                    width="120"
                                    height="90"/>
                          <mx:VBox height="90"
                                   width="100%"
                                   verticalGap="2">
                              <mx:HBox horizontalAlign="left"
                                       verticalAlign="middle"
                                       horizontalGap="2"
                                       width="100%">
                                  <mx:Image width="16"
                                            height="16"
                                            source="icon.png"/>
                                  <mx:LinkButton label="{data.title}"
                                                 fontSize="12"
                                                 width="100%"
                                                 textAlign="left"/>
                              </mx:HBox>

                       

                              <mx:HRule height="1"
                                        width="100%"/>
                              <mx:Text text="{data.description}"
                                       width="100%"
                                       fontSize="12"/>

                          </mx:VBox>

                       


                          <mx:Script>
                              <![CDATA[

                       

                       

                                  private var _data:Object;

                       

                                  public function completeHandler():void
                                  {
                                      _data=data;
                                  }
                              ]]>
                          </mx:Script>

                       

                      </mx:HBox>

                       

                      From what I understand, the measuring function isn't working as it should.

                       

                      Any hints about this. Thanks again for your help and patience.

                       

                      Bye.

                      • 8. Re: Scroll only in outmost component
                        BhaskerChari Level 4

                        Hi,

                         

                        Try to reply soon so that you may get quick replies...you seem to be giving very delayed response.

                         

                        Anyway replace the resizeDatagrid datagrid function which I sent you earliar with the below one and check ...I am sure now this time it should resolve your problem.

                         

                        The measuring function is working correctly but you also need to add another two lines of code mentioned below.


                        private function resizeDatagrid():void
                          {               
                              exerciseListTable.height = exerciseListTable.measureHeightOfItems(0, _dataProvider.length) + exerciseListTable.headerHeight;
                              exerciseListTable.rowCount = _dataProvider.length;
                           exerciseListTable.rowHeight = 100;// your item renderer height
                          }

                        Note:

                         

                        Also please use the whole Application code which I have sent you earliar...

                         

                        Hope this time your problem will be resolved.

                         

                        If this post answers your question or helps, please kindly mark it as such.


                        Thanks,

                        Bhasker Chari

                        • 9. Re: Scroll only in outmost component
                          Shibby4444 Level 1

                          Sorry to keep you waiting, I'm very busy lately.

                           

                          In the end, I did it this way. Hard-typing the height of the component isn't very -well-practise- but, I guess I'll have to stick with it.

                           

                          private function resizeDataGrid():void{
                                          exerciseListTable.rowCount = _dataProvider.length;
                                          exerciseListTable.rowHeight = 102;
                                          exerciseListTable.height = exerciseListTable.measureHeightOfItems(0, _dataProvider.length) + exerciseListTable.headerHeight;
                          }

                           

                          Thanks for your help.


                          Bye.