<?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>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/flexrhythm/archive/2010/06/26/5696128.aspx
分享到:
相关推荐
FLEX DATA GRID 分页的代码,上传上来给大家参考参考
flex客户端和服务端分页控件,后台使用java实现数据的传送,flex客户端调用服务端的webservices服务进行数据的展现~~ 内附myeclipse项目和flex项目·~ 分别导入可运行,注意端口的修改~
对于Flex +BlazeDS+java开发的项目分页组件的实现,基本设计是分页ui组件负责前台分页的显示,后台java实现sql分页查询。 附带源码。
基于桌面的flex的分页实现
Flex开发 Flex dataGrid分页技术
不用连接数据库,实现少量数据的前台分页,减少后台代码的繁琐,轻松搞定前台页面实现分页
flex4的分页代码,原始在flex4中做过的测试代码
本例实现对dataGrid组件的分页功能,实现的技术采用Flex3实现
这个分页只与后台交互一次,然后将获得的集合在前台进行分页显示。
此组件是基于flex4的List 自定义了全选,反选功能
利用BlazeDS实现与后台通信,简单明了,会了这个,查询全部数据后在分页也就会了。
flex分页 很好很强大 简单引用 很方便
实例说明了 Flex4中 Menu和List的使用。
FLex 分页,flex编程,将datagrid 实现数据显示
这是我自己写的一个flex组件,使用简单,在使用的时候,只需要在页面载入里,新建组件对象就OK,另外还有一个方法监听控件返回的的页数,可以实现分面。flex会生成linkButton,并且可以按需要控件显示的数量。如有不...
Flex4.x 构建可编辑的List【带序号排列】
完美解决 Flex 4 中 实现 图文混排
flex+actionScript3.0分页技术 也可以直接从第几页查看
flex pdf导出功能,具有分页效果。解决自带save()方法中的安全沙箱问题。ps :crossdomain.xml也解决不了,最后换的另一种的方式
1. Oracle 存储过程分页 2. Java 调用 Oracle 存储过程 3. Flex 分页