Flex 4 List Data Paging(Flex 4 List控件分页功能的实现)
2010-11-03 17:05
260 查看
SWF:
swfobject.embedSWF("http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/FlexListPaging.swf", "swfobject2-id-12887746521", "500", "375", "7", "", [ ], { "swliveconnect": "default", "play": "true", "loop": "true", "menu": "false", "quality": "autohigh", "scale": "showall", "align": "l", "salign": "tl", "wmode": "opaque", "bgcolor": "#FFFFFF", "version": "7", "allowfullscreen": "true", "allowscriptaccess": "sameDomain", "base": "http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/", "src": "http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/FlexListPaging.swf", "height": 375, "width": 500 }, { "id": "swf12887746521" });
要想了解Flex 4 List控件的分页功能(paging)的实现,必须先理解Flex 4中滚动机制的实现原理,可以参考我上次介绍的Flex 4中的Scrolling和viewports机制这篇文章。下面从Spike的代码开始介绍List控件分页功能(paging)的实现:
<?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"
xmlns:local="*" creationComplete="init()"
height="100%" width="100%">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable] public var totalPages:Number;
[Bindable] public var currentPage:Number = 1;
[Embed(source='assets/backpack.jpg')]
[Bindable]
public var backpackCls:Class;
[Embed(source='assets/boots.jpg')]
[Bindable]
public var bootsCls:Class;
[Embed(source='assets/compass.jpg')]
[Bindable]
public var compassCls:Class;
[Embed(source='assets/goggles.jpg')]
[Bindable]
public var gogglesCls:Class;
[Embed(source='assets/helmet.jpg')]
[Bindable]
public var helmetCls:Class;
public function prevPageHandler():void {
if(currentPage == 1) return ;
currentPage--;
//上一页
list.scroller.verticalScrollBar.changeValueByPage(false);
}
public function nextPageHandler():void {
if(currentPage == totalPages) return;
currentPage++;
//下一页
list.scroller.verticalScrollBar.changeValueByPage(true);
}
//设置list控件的滚动控件的样式
public function init():void {
//关掉滚动控件的垂直和水平滚动条
list.scroller.setStyle('horizontalScrollPolicy', 'off');
list.scroller.setStyle('verticalScrollPolicy', 'off');
//设置滚动控件的垂直滚动条的滚动样式
list.scroller.verticalScrollBar.setStyle('smoothScrolling', true);//设置为平滑滚动
list.scroller.verticalScrollBar.setStyle('repeatInterval', 500);//设置滚动到指定点的经过的时间
totalPages = Math.ceil(list.scroller.viewport.contentHeight/list.scroller.verticalScrollBar.pageSize);
}
]]>
</fx:Script>
<s:VGroup x="10" y="5" height="100%" width="100%">
<s:Label text="Page {currentPage} of {totalPages}"/>
<s:HGroup>
<s:VGroup>
<s:Button id="prev" label="Prev" click="prevPageHandler()"/>
<s:Button id="next" label="Next" click="nextPageHandler()"/>
</s:VGroup>
<s:List id="list" width="400" height="362">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
</s:ArrayCollection>
</s:dataProvider>
<s:layout>
<s:TileLayout horizontalGap="0" verticalGap="0" requestedColumnCount="3"
columnWidth="120" rowHeight="120"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<local:PictureItemRenderer />
</fx:Component>
</s:itemRenderer>
</s:List>
</s:HGroup>
</s:VGroup>
</s:Application>
Flex 4中List控件在皮肤中定义了Scroller控件,Scroller 组件显示一个称为视域的单个可滚动组件,以及水平滚动条和垂直滚动条。在上面代码中通过设置List的scroller的horizontalScrollPolicy和verticalScrollPolicy样式,关掉了scroller的水平和垂直滚动条。最后通过scroller的verticalScrollerBar的changeValueByPage()方法来控制显示下一页或上一页。这里将List控件的高度设为362,而不是刚好显示三行图片的高度360。至于为什么要高两个像素,目前还没有完全弄清楚,也许是边框或间隔什么的占的空间。总页数是通过scroller中的内容高度除以scroller的垂直页面大小(高度)计算出来的,这样就基本实现了List的分页功能,是不是很简单,那就赶快动手试试吧。至于上面提到的高度问题,还望高手指点指点。
swfobject.embedSWF("http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/FlexListPaging.swf", "swfobject2-id-12887746521", "500", "375", "7", "", [ ], { "swliveconnect": "default", "play": "true", "loop": "true", "menu": "false", "quality": "autohigh", "scale": "showall", "align": "l", "salign": "tl", "wmode": "opaque", "bgcolor": "#FFFFFF", "version": "7", "allowfullscreen": "true", "allowscriptaccess": "sameDomain", "base": "http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/", "src": "http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/FlexListPaging.swf", "height": 375, "width": 500 }, { "id": "swf12887746521" });
要想了解Flex 4 List控件的分页功能(paging)的实现,必须先理解Flex 4中滚动机制的实现原理,可以参考我上次介绍的Flex 4中的Scrolling和viewports机制这篇文章。下面从Spike的代码开始介绍List控件分页功能(paging)的实现:
<?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"
xmlns:local="*" creationComplete="init()"
height="100%" width="100%">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable] public var totalPages:Number;
[Bindable] public var currentPage:Number = 1;
[Embed(source='assets/backpack.jpg')]
[Bindable]
public var backpackCls:Class;
[Embed(source='assets/boots.jpg')]
[Bindable]
public var bootsCls:Class;
[Embed(source='assets/compass.jpg')]
[Bindable]
public var compassCls:Class;
[Embed(source='assets/goggles.jpg')]
[Bindable]
public var gogglesCls:Class;
[Embed(source='assets/helmet.jpg')]
[Bindable]
public var helmetCls:Class;
public function prevPageHandler():void {
if(currentPage == 1) return ;
currentPage--;
//上一页
list.scroller.verticalScrollBar.changeValueByPage(false);
}
public function nextPageHandler():void {
if(currentPage == totalPages) return;
currentPage++;
//下一页
list.scroller.verticalScrollBar.changeValueByPage(true);
}
//设置list控件的滚动控件的样式
public function init():void {
//关掉滚动控件的垂直和水平滚动条
list.scroller.setStyle('horizontalScrollPolicy', 'off');
list.scroller.setStyle('verticalScrollPolicy', 'off');
//设置滚动控件的垂直滚动条的滚动样式
list.scroller.verticalScrollBar.setStyle('smoothScrolling', true);//设置为平滑滚动
list.scroller.verticalScrollBar.setStyle('repeatInterval', 500);//设置滚动到指定点的经过的时间
totalPages = Math.ceil(list.scroller.viewport.contentHeight/list.scroller.verticalScrollBar.pageSize);
}
]]>
</fx:Script>
<s:VGroup x="10" y="5" height="100%" width="100%">
<s:Label text="Page {currentPage} of {totalPages}"/>
<s:HGroup>
<s:VGroup>
<s:Button id="prev" label="Prev" click="prevPageHandler()"/>
<s:Button id="next" label="Next" click="nextPageHandler()"/>
</s:VGroup>
<s:List id="list" width="400" height="362">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Helmet" photo="{helmetCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
<fx:Object name="Goggles" photo="{gogglesCls}"/>
<fx:Object name="Backpack" photo="{backpackCls}"/>
<fx:Object name="Boots" photo="{bootsCls}"/>
<fx:Object name="Compass" photo="{compassCls}"/>
</s:ArrayCollection>
</s:dataProvider>
<s:layout>
<s:TileLayout horizontalGap="0" verticalGap="0" requestedColumnCount="3"
columnWidth="120" rowHeight="120"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<local:PictureItemRenderer />
</fx:Component>
</s:itemRenderer>
</s:List>
</s:HGroup>
</s:VGroup>
</s:Application>
Flex 4中List控件在皮肤中定义了Scroller控件,Scroller 组件显示一个称为视域的单个可滚动组件,以及水平滚动条和垂直滚动条。在上面代码中通过设置List的scroller的horizontalScrollPolicy和verticalScrollPolicy样式,关掉了scroller的水平和垂直滚动条。最后通过scroller的verticalScrollerBar的changeValueByPage()方法来控制显示下一页或上一页。这里将List控件的高度设为362,而不是刚好显示三行图片的高度360。至于为什么要高两个像素,目前还没有完全弄清楚,也许是边框或间隔什么的占的空间。总页数是通过scroller中的内容高度除以scroller的垂直页面大小(高度)计算出来的,这样就基本实现了List的分页功能,是不是很简单,那就赶快动手试试吧。至于上面提到的高度问题,还望高手指点指点。
相关文章推荐
- Flex 4 List Data Paging(Flex 4 List控件分页功能的实现)
- 使用PagedDataSource类实现DataList和Repeater控件的分页显示功能
- Repeater控件结合UpdatePanel实现Ajax分页和删除功能
- GridView控件实现分页功能
- ListView结合DataPager实现分页的功能(数据绑定时)
- 在Flex下实现数据分页控件
- ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示(二)
- Repeater控件与PagedDataSource结合实现分页功能
- 在Flex下实现数据分页控件
- Repeater控件使用实现(含删除,分页功能)
- wpf打印控件 实现分页打印控件功能
- asp.net Datalist控件实现分页功能
- 把集合绑定到数据控件上并实现分页功能
- 使用AspNetPager分页控件、分页存储过程及用户控件基类实现的完美分页功能
- 使用PagedDataSource类实现DataList和Repeater控件的分页显示功能
- 【实战项目】【FLEX】#900 实现拖控件功能
- 让DataPager分页控件实现服务器端分页
- TreeList控件实现数据过滤功能
- TreeList控件实现数据过滤功能
- ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js