0 Replies Latest reply on Mar 8, 2010 11:03 PM by jfillman

    Custom Layout of Sorted DataProvider

    jfillman Level 1

      I'm working on a custom layout that set's the x, y, height, and width. Some of these items are calculated in the custom layout and some are values stored in my ArrayCollection dataprovider.

       

      I don't have any issue assigning the x, y, height, and width. However, when I sort the dataprovider (used for looping to determing x, height, etc), is no longer in sync with the order that the layout is looping through in the original ArrayCollection. This creates a problem, because I have some textual fields in the ArrayCollection that have to be correctly assigned to the correct rendered item.

       

      For example:

       

      Original ArrayCollection text (x,y) position:

      Item # 1 (5, 50)

      Item # 2  (50, 125)

      Item # 3  (5, 25)

      Item #4  (15, 40)

       

      The DataGroup container creates the 4 item renderers based on the dataProvider. However, when I sort the dataProvider, the order is changed to:

      Item # 3  (5, 25)

      Item # 1 (5, 50)

      Item #4  (15, 40)

      Item #2  (50, 125)

       

       

       

      So what I gets displayed is:

      Item # 3 (5, 25) - Displays as "Item # 1"

      Item # 1 (5, 50) - Displays as "Item # 2"

      Item # 4 (15, 40) - Displays as "Item # 3"

      Item # 2 (50, 125) - Displays as "Item # 4"

       

       

      I've abbreviated the code here a bit for simplicity:

       

      package DataLayout
      {
      import mx.collections.ArrayCollection;
      import mx.core.ILayoutElement;

      import spark.components.DataGroup;
      import spark.components.supportClasses.GroupBase;
      import spark.layouts.supportClasses.LayoutBase;


      public class myDataLayout extends LayoutBase
      {

        override public function updateDisplayList(containerWidth:Number, containerHeight:Number):void
        {
         var x:Number = 0;
         var y:Number = 0;
         var maxWidth:Number = 0;
         var maxHeight:Number = 0;
         var layoutTarget:GroupBase = target;
         var dataProvider:ArrayCollection = ArrayCollection(DataGroup(target).dataProvider);
         setGroups();
        
         function setGroups():void {
          dataProvider.source.sortOn(["y", "Height"], [Array.NUMERIC, Array.NUMERIC | Array.DESCENDING]);
          x = ((y + 10) / 0.5);
         }
        

        
         for (var x:int = 0; x < dataProvider.length; x++) {
          // get the current element, we're going to work with the
          // ILayoutElement interface
          var element:ILayoutElement = useVirtualLayout ?
           layoutTarget.getVirtualElementAt(x) :
           layoutTarget.getElementAt(x);

          // Resize the element to its preferred size by passing
          // NaN for the width and height constraints
          element.setLayoutBoundsSize(NaN, NaN);

          // Find out the element's dimensions sizes.
          // We do this after the element has been already resized
          // to its preferred size.
          var elementWidth:Number = element.getLayoutBoundsWidth();
          var elementHeight:Number = element.getLayoutBoundsHeight();
         
          y = dataProvider[x].y;
          x = dataProvider[i].x;

         
          // Position the element
          element.setLayoutBoundsPosition(x, y);
          element.setLayoutBoundsSize(dataProvider[i].Width, dataProvider[i].Height);
         
          // Find maximum element extents. This is needed for
          // the scrolling support.
          maxWidth = dataProvider[i].Width;
          maxHeight = dataProvider[i].Height;
         
         }
        
         // Scrolling support - update the content size
         layoutTarget.setContentSize(maxWidth, maxHeight);
        }
      }
      }