Flex Examples
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 deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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.
Thank you for this post. It seems to have all the elements that may lead to my answer:
I have a flex list small enough to displays one item at a time and this list contains 12 items. I want to get rid of the scroll, and have the list switch display whenever calendar months are scrolled, however, initially, this list should display the item relative to the current month.
I will use whatever help I can get. Please.
Thank you.
@Emmanuel,
I’m not sure I understand your question, but if you’re trying to create a List that only displays 1 item at a time and doesn’t display a vertical scroll bar, this should get you started:
Peter
@Peter
Hello Peter,
Thank you very much for your assistance, it’s been incredible, I have found the my answer in both of your versions. Again, thank you! you’ve been terrific.
Thanks.
Emmanuel
Or, if you’re trying to update a List when the DateChooser changes it’s displayed month, you could try something like this:
Peter
Hi Peter,
It looks like this property disappeared in Flex 4. Do you have a way to do this with a spark list?
Thanks.
@Brian,
I don’t believe that this currently is supported by the Spark List control. I suggest filing a bug/enhancement at http://bugs.adobe.com/flex/ and having 20 of your closest friends vote on it. (Post the bug number here and I’ll vote!)
Peter
I have added a comment to an existing bug (see link below). I am not sure if it will reactivate the bug or not. If you know it doesnt, let me know for I can post a new bug/enhancement.
https://bugs.adobe.com/jira/browse/SDK-15034
Nice one, the itemsChangedEffect example for Actionscript also works with TileList.
Thanks
Brian