Question

I have a <s:List> in my Flex 4.6 project which uses an itemrenderer. My application occasionally pushes more items onto this <s:List>, and the itemrenderer obtains and applies this change as expected. My list looks like this:

<s:List borderVisible="false" contentBackgroundAlpha="0" 
        dataProvider="{this.data.root.item}" id="reviews"
        itemRenderer="renderers.pages.ReviewRenderer" minHeight="1"
        top="10" width="100%">
  <s:layout>
    <s:VerticalLayout gap="35" requestedMinRowCount="1" useVirtualLayout="false/>
  </s:layout>
</s:List>

… and I append more data onto the data provider object like so:

this.data.root.item.addItem(this.form.reviewData);

I would like to know if there is an event that I can listen for whenever the addItem() method pushes more data onto the object for the <s:List> to display.

I know I could use the FlexEvent.VALUE_COMMIT event, but, according to the documentation, this would dispatch whenever data is first applied to the list, and any item user interaction with the list updates one of its properties (such as selecting one of the list items).

So, just to be clear, I am looking for an event that is dispatched only whenever addItem() appends data to the data provider.

Note: I am using a <s:List> component for a web project, not the mobile optimized version.

Thank you for your time.

Answer 1

If the dataProvider (this.data.root.item in your example) to the list is an ArrayCollection, XMLListCollection, or ListCollectionView it will dispatch CollectionEvent.COLLECTION_CHANGE when ever the collection changes.

CollectionEvent has a kind property that you need to inspect, as there are various kinds of changes (see the CollectionEventKind class). In particular, you might be interested in CollectionEventKind.ADD.

Another approach would be to override the addItem() method of your dataProvider and dispatch your own “itemAdded” event:

override public function addItem(item:Object):void
{
    super.addItem(item);
    dispatchEvent(new Event("itemAdded"));
}