flex IViewCursor 的应用

最新推荐文章于 2024-02-19 15:18:25 发布

原创最新推荐文章于 2024-02-19 15:18:25 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

Adobe 专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一个使用IViewCursor控件的示例，用于实现页面分页功能，并提供了与SparkSpinner控件的对比。通过创建一个自定义的数组集合，并使用IViewCursor来管理数据的浏览，实现了向上翻页和向下翻页的功能，当到达列表的边界时，自动切换到首尾项。此方法适用于需要动态加载大量数据的场景，以提高用户体验。

IViewCursor 的应用 demo

效果图：可以上下翻不会，当索引最大的时候，自动变成最小索引 (可用于分页，或者替换spark Spinner控件，自定义)

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="group1_creationCompleteHandler(event)">
<fx:Script> 
<![CDATA[
import mx.collections.CursorBookmark;
import mx.collections.IViewCursor;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.FlexEvent;
import spark.components.supportClasses.TextBase;
[Bindable] 
private var dpCursor :IViewCursor;
protected function group1_creationCompleteHandler(event:FlexEvent):void { 
dpCursor = productColl.createCursor();
dpCursor.seek(CursorBookmark.FIRST);
} 
protected function movePrevious(e:MouseEvent):void {
dpCursor.movePrevious(); 
if(dpCursor.beforeFirst) dpCursor.seek(CursorBookmark.LAST);
} 
protected function moveNext(e:MouseEvent):void {
dpCursor.moveNext();
if(dpCursor.afterLast) dpCursor.seek(CursorBookmark.FIRST); 
} 
]]> 
</fx:Script>
<fx:Declarations>
<s:ArrayCollection id="productColl"> 
<s:source> 
<fx:Array id="productArr"> 
<fx:Object name="1" />
<fx:Object name="2" /> 
<fx:Object name="3" />
<fx:Object name="4" />
<fx:Object name="5" /> 
<fx:Object name="6" />
<fx:Object name="7" />
<fx:Object name="8" />
</fx:Array>
</s:source>
</s:ArrayCollection> 
</fx:Declarations>
<s:Panel title="title: {dpCursor.current.name}" width="200" height="101"> 
<mx:Label text="{dpCursor.current.name}" fontSize="20" horizontalCenter="0" />
<s:controlBarContent>
<s:Button id="prevBtn" label="&lt;" width="30" height="20" toolTip="Move Previous" click="movePrevious(event)"/>
<s:Rect width="100%" /> 
<s:Button id="nextBtn" label="&gt;" width="30" height="20" toolTip="Move Next" click="moveNext(event)"/> 
</s:controlBarContent> 
</s:Panel> 
</s:Application>