The following example shows how you can add a data effect when the items in a data provider change in a Flex List control by setting the itemsChangeEffect effect style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function addItemToDataProvider():void {
var obj:Object = {label:new Date().toTimeString()};
var idx:int = Math.max(list.selectedIndex, 0);
list.scrollToIndex(idx);
arrColl.addItemAt(obj, idx);
}
private function removeItemFromDataProvider():void {
if (arrColl.length == 0) {
return;
}
var idx:int = Math.max(list.selectedIndex, 0);
list.scrollToIndex(idx);
arrColl.removeItemAt(idx);
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl" />
<mx:DefaultListEffect id="defaultListEffect" />
<mx:ApplicationControlBar dock="true">
<mx:Button label="Add item"
click="addItemToDataProvider();" />
<mx:Button label="Delete item"
click="removeItemFromDataProvider();" />
</mx:ApplicationControlBar>
<mx:List id="list"
dataProvider="{arrColl}"
itemsChangeEffect="{defaultListEffect}"
variableRowHeight="true"
width="200" />
</mx:Application>
View source is enabled in the following example.
You can also set the itemsChangeEffect effect in an external .CSS file or <mx:Style /> block, as seen in the following snippet:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function addItemToDataProvider():void {
var obj:Object = {label:new Date().toTimeString()};
var idx:int = Math.max(list.selectedIndex, 0);
list.scrollToIndex(idx);
arrColl.addItemAt(obj, idx);
}
private function removeItemFromDataProvider():void {
if (arrColl.length == 0) {
return;
}
var idx:int = Math.max(list.selectedIndex, 0);
list.scrollToIndex(idx);
arrColl.removeItemAt(idx);
}
]]>
</mx:Script>
<mx:Style>
List {
itemsChangeEffect: ClassReference("mx.effects.DefaultTileListEffect");
}
</mx:Style>
<mx:ArrayCollection id="arrColl" />
<mx:ApplicationControlBar dock="true">
<mx:Button label="Add item"
click="addItemToDataProvider();" />
<mx:Button label="Delete item"
click="removeItemFromDataProvider();" />
</mx:ApplicationControlBar>
<mx:List id="list"
dataProvider="{arrColl}"
variableRowHeight="true"
width="200" />
</mx:Application>
Or, you can set the itemsChangeEffect effect using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.effects.DefaultListEffect;
private function init():void {
list.setStyle("itemsChangeEffect", DefaultListEffect);
}
private function addItemToDataProvider():void {
var obj:Object = {label:new Date().toTimeString()};
var idx:int = Math.max(list.selectedIndex, 0);
list.scrollToIndex(idx);
arrColl.addItemAt(obj, idx);
}
private function removeItemFromDataProvider():void {
if (arrColl.length == 0) {
return;
}
var idx:int = Math.max(list.selectedIndex, 0);
list.scrollToIndex(idx);
arrColl.removeItemAt(idx);
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl" />
<mx:ApplicationControlBar dock="true">
<mx:Button label="Add item"
click="addItemToDataProvider();" />
<mx:Button label="Delete item"
click="removeItemFromDataProvider();" />
</mx:ApplicationControlBar>
<mx:List id="list"
dataProvider="{arrColl}"
variableRowHeight="true"
width="200"
initialize="init();" />
</mx:Application>




Peter,
Thanks so much for this post! I’ve been trying to use this effect with a list containing custom item renderers and it seems to perform and animate rather poorly. Do you know if the DefaultListEffect component accounts for renderers that don’t have an explicit height or has variableRowHeight set? Maybe it wasn’t meant for that and just fixed height renderers? Either way thanks!
thanks man, didn’t realize it was that simple!