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!
Hi I searched alot but couldn’t find any clue , As I understand I cant use this itemsChangeEffect
on datagrid so what else can I use instead.
This is perfect - and so simple.
However, there’s one small detail that I find annoying. In my application, I have rows that are quite tall (about 80 pixels or so), and when the “delete” animation moves everything up, there is a small jump up at the very end. It makes the animation feel clunky.
I noticed it is the same in your demo but your rows are not that tall so it’s not as noticeable - but still there.
Is this something that can be fixed? I tried suspendbackgroundprocessing to see if that would help but no luck.
Andrew.