Flex中通过itemsChangeEffect样式设置List控件中数据项目改变时效果的例子
By Minidxer | July 30, 2008
接下来的例子演示了Flex中如何通过itemsChangeEffect样式，设置List控件中数据项目改变时效果。下面的Demo中通过“Add item”和“Delete item”察看效果。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
下面是完整实现代码(或点击这里察看)：
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <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>
代码：Peter deHaan 翻译/整理/编译：minidxer
Topics:
Flex |
Tags: DefaultListEffect, itemsChangeEffect, List