2. Normally, this isn’t such a big deal, however, depending on how you add data to the dataProvider, it can throw an error.

For example, the following works, however, it triggers an updateDisplayList for each item:
acOne.addAll(acOneTemp);

So, to be a bit more efficient, I wanted to pass the entire array to the DataGroups dataProvider, so it could loop through the dataProvider 1 time to perform the layout. So I tried this:

acOne.source = acOneTemp.source;

For some reason, this causes a run-time error and it doesn’t like this line:

element.setLayoutBoundsSize(NaN, NaN);

TypeError: Error #1009: Cannot access a property or method of a null object reference.

Something to consider for future releases is a tighter integration between rendered element and the items in the data provider, so if the data provider gets sorted, it doesn’t throw off the display. Sorting is pretty common, so I imagine others will struggle with this as well.

Slight correcting…I comment out the following line and the display updates correctly, however, I need the sort to assist in calculating width and x.

dataProvider.source.sortOn(["Height"], [Array.NUMERIC | Array.DESCENDING]);

I’ve made significant progress with some of your pointers!! However, I’m still stuck on one area, and that is the sorting the dataProvider is throwing things off, if I change the underlying data in the dataProvider after the initial updateDisplayList.

I have an example FXP project that demonstrates the issue, but I don’t have a place to post it since I can’t upload to the Adobe Forums, so I’ll try and copy the relevant pieces below. If I comment out this line:

dataProvider = ArrayCollection(DataGroup(target).dataProvider);

The display elements update when I reSize an item, however, I need to use the sorting. The sorting is not relevant to this example application, but I need to use it.

customLayout.as

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

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

public class customLayout extends LayoutBase {
public var layoutTarget:GroupBase;
public var count:int;
public var dataProvider:ArrayCollection;
public var maxHeight:Number = 0;
public var maxWidth:Number;
public var x:Number;
public var y:Number;

public function setLayout():void {
layoutTarget = this.target;
dataProvider = ArrayCollection(DataGroup(target).dataProvider);
count = layoutTarget.numElements;
dataProvider.source.sortOn(["Height"], [Array.NUMERIC | Array.DESCENDING]);
if (dataProvider[0].Height > dataProvider[1].Height) {
dataProvider[0].xPos = 0;
dataProvider[1].xPos = 60;
}
else if (dataProvider[1].Height > dataProvider[0].Height) {
dataProvider[1].xPos = 0;
dataProvider[0].xPos = 60;
}
}

override public function updateDisplayList(containerWidth:Number, containerHeight:Number):void {
for (var ii:int = 0; ii < count; ii++) {
// get the current element, we’re going to work with the
// ILayoutElement interface

var element:ILayoutElement = layoutTarget.getElementAt(ii);
var item:ItemRenderer = target.getElementAt(ii) as ItemRenderer;

// 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();
item.uid = String(ii);

y = 0;
x = dataProvider[ii].xPos;
// Find maximum element extents. This is needed for
// the scrolling support.
maxWidth = 50;
maxHeight = dataProvider[ii].Height;

// Position the element
element.setLayoutBoundsPosition(x, y);
element.setLayoutBoundsSize(maxWidth, maxHeight);
}
// Scrolling support – update the content size
layoutTarget.setContentSize(maxWidth, maxHeight);
}
}
}

DataGroup.mxml

49) {
myAC[itemID].Height = myAC[itemID].Height + event.stageY – initY;
resizingElement.height = resizingElement.height + event.stageY – initY;
initY = event.stageY;
}
}

protected function mouseUpHandler(event:MouseEvent):void {
cLayout.setLayout();
this.invalidateDisplayList();
systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
systemManager.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);
}

]]>

Jason

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

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

public class calLayout extends LayoutBase {
override public function updateDisplayList(containerWidth:Number, containerHeight:Number):void {
var x:Number = 0;
var y:Number = 0;
var layoutTarget:GroupBase = target;
var count:int = layoutTarget.numElements;
var dataProvider:ArrayCollection = ArrayCollection(DataGroup(target).dataProvider);
layoutOne();

function layoutOne():void {
dataProvider.source.sortOn(["y", "Height"], [Array.NUMERIC, Array.NUMERIC | Array.DESCENDING]);
for (var i:int = 1; i < dataProvider.length; i++) {
//Sets group and maxGroup
}
layoutTwo();
}

function layoutTwo():void {
dataProvider.source.sortOn(["Group", "y", "Height"], [Array.NUMERIC, Array.NUMERIC, Array.NUMERIC | Array.DESCENDING]);
for (var ii:int = 1; ii < maxGroup+1; ii++) {
//Does something else, but is dependant on values calculated in previous
//function, and must be calculated for all items in Array before proceeding.
}
layoutThree();
}

function setColumnPosition1(): void {
dataProvider.source.sortOn(["Group", "y", "Height"], [Array.NUMERIC, Array.NUMERIC, Array.NUMERIC | Array.DESCENDING]);
for (var vi:int=0; vi < dataProvider.length; vi++) {
//Does something else, but is dependant on values calculated in previous
//function, and must be calculated for all items in Array before proceeding.
}
}

for (var viv:int = 0; viv < count; viv++) {
// get the current element, we’re going to work with the
// ILayoutElement interface

var element:ILayoutElement = layoutTarget.getElementAt(viv);
var item:ItemRenderer = target.getElementAt(viv) as ItemRenderer;

// 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();
var dataID:Number;
for (var vv:int = 0; vv < dataProvider.length; vv++) {
if (dataProvider[vv].apID == item.data.apID) {
y = dataProvider[vv].y;
x = SOME FORMULA
// Find maximum element extents. This is needed for
// the scrolling support.
maxWidth = dataProvider[vv].Width;
maxHeight = target.height;
break;
}
}

// Position the element
element.setLayoutBoundsPosition(x, y);
element.setLayoutBoundsSize(dataProvider[vv].Width, dataProvider[vv].Height);
}

// Scrolling support – update the content size
layoutTarget.setContentSize(maxWidth, maxHeight);
}
}
}

It’s not about bringing elements to the top.

Except for one oddity where FlashPlayer appears to stop updating the width of elements (it’s most likely my code), it seems to be working pretty much as I had hoped, however, your response above gives me concern as to my current approach.