flex4 分页通用组件

1.新建一个 vbox
代码如下

<?xml version="1.0" encoding="UTF-8"?>
<mx:VBox  xmlns:fx="http://ns.adobe.com/mxml/2009"
	 xmlns:s="library://ns.adobe.com/flex/spark"   
	 xmlns:mx="library://ns.adobe.com/flex/mx"
	   width="100%" height="100%">
	<fx:Script>
		<![CDATA[
 			import mx.controls.Alert;
			import mx.rpc.events.AbstractEvent;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.collections.ArrayCollection;	 		
			import mx.effects.easing.*;	
			
			[Bindable]
			public var dataSource:ArrayCollection=new ArrayCollection();//存放数据源
			[Bindable]
			public var dataColumn:Array;//存放列
			[Bindable]
			public var totalPage:int;//总页数
			[Bindable]
		    public var totalRecords:int;//一共有多少条
		    [Bindable]
			public var currentPage:int=1;/*当前页*/
			[Bindable]
			public var rowsPerPage:int=1;//一页显示多少条

			protected function pgup_clickHandler(event:MouseEvent):void
			{			
				currentPage--;		
				if(currentPage<=0)
				{
					currentPage=1;
				}
				this.dispatchEvent(new Event("pageChangeEvent"));
			}

			protected function pgdn_clickHandler(event:MouseEvent):void
			{
				currentPage++;
				this.dispatchEvent(new Event("pageChangeEvent"));
			}
           
			protected function firstPage_clickHandler(event:MouseEvent):void
			{
				currentPage=1;
				this.dispatchEvent(new Event("pageChangeEvent"));
			}

			protected function lastPage_clickHandler(event:MouseEvent):void
			{
				currentPage=totalPage;
				this.dispatchEvent(new Event("pageChangeEvent"));
			}
			protected function go_clickHandler(event:MouseEvent):void
			{
				if(pageTxt.value>0&&pageTxt.value<=totalPage){
					currentPage=pageTxt.value;
					this.dispatchEvent(new Event("pageChangeEvent"));
				}else{
				   Alert.show("请输入合法的数字");
				}
			}
		]]>
	</fx:Script>
	<fx:Metadata>
		[Event(name="pageChangeEvent",type="flash.events.Event")]		 
	</fx:Metadata>
	
		<mx:DataGrid width="100%" height="100%" id="dataGrid"      dataProvider="{dataSource}" columns="{dataColumn}">	
	</mx:DataGrid>
	
	
	<mx:HBox width="100%" height="5%" paddingRight="10"   id="hBox"  verticalAlign="middle"  horizontalAlign="right"> 
		<mx:Button label="首页" id="firstPage" enabled="{currentPage==1?false:true}" click="firstPage_clickHandler(event)" />
	    
	    <mx:Button label="上一页" id="pgup" enabled="{currentPage>1?true:false}" click="pgup_clickHandler(event)"/>
		<mx:Button label="下一页"  id="pgdn" enabled="{currentPage>=totalPage?false:true}" click="pgdn_clickHandler(event)"/>
		<mx:Button label="尾页" id="lastPage" enabled="{currentPage==totalPage?false:true}" click="lastPage_clickHandler(event)" />
		<mx:Label     id="pageDetail" text="共{totalRecords}条记录    第{currentPage}页/共{totalPage}页" x="591"/>
		<s:NumericStepper   id="pageTxt" maximum="{totalPage}"  value="1" stepSize="1."   x="787" width="52"/>
		<mx:Button label="GO"    id="go" click="go_clickHandler(event)"/>
</mx:HBox>
<fx:Declarations>
<!--
<s:Sequence id="sequence" target="{dataGrid}">
       
	    <mx:Move xBy="{width}" duration="2000" easingFunction="Bounce.easeOut"/>
            <mx:Pause duration="100"/>
        <mx:Move  xBy="{-width}" duration="2000" easingFunction="Bounce.easeIn"/>
	    

</s:Sequence>-->
<!--实现转-->
<!-- <s:Rotate3D id="sequence" 
          
          angleYFrom="0" angleYTo="360"
          duration="100" autoCenterTransform="true"
          />-->
  
</fx:Declarations>
</mx:VBox>

里有分页 有显示记录条数 跟总页数
2.在引用界面 开 xmlns:util="com.relonger.cclj.util.*"
如图：

在要显示的地方加上如下代码

	<util:CommDataGrid id="codg"  pageChangeEvent="codg_pageChangeEventHandler(event)" dataSource="{dp}" width="100%" height="100%">
				<util:dataColumn>
<!-- 这个是编号自动增长的-->
					<!--<mx:DataGridColumn headerText="label" dataField="label">
					<mx:itemRenderer>
					<fx:Component >
					<mx:Label text="{this.outerDocument.genrowno(data)}" />
					</fx:Component>
					</mx:itemRenderer>			
					</mx:DataGridColumn>-->
					<mx:DataGridColumn headerText="label" dataField="label"/>
					<mx:DataGridColumn headerText="d1" dataField="d1"/>
					<mx:DataGridColumn headerText="d2" dataField="d2"/>
					<mx:DataGridColumn headerText="d3" dataField="d3"/>
					<mx:DataGridColumn headerText="d4" dataField="d4"/>
					<mx:DataGridColumn headerText="d5" dataField="d5"/>
				</util:dataColumn>
			</util:CommDataGrid>

（1）dp 为数组源
（2）codg_pageChangeEventHandler 为组件里面挷定的函数 里面所有的操体做都是靠他来完成的  在codg_pageChangeEventHandler 方法里同向后吧传值 需要给后台传要显示当前是第几页 每页显示的记录条数 在反回的方法里面要给三个数付值
如
（3）编号 方法如下

public function genrowno(ob:Object):String
			{
				return String((codg.dataGrid.dataProvider as ArrayCollection).getItemIndex(ob)+1);
			} 

dp =  new ArrayCollection([{"d1":"","d2":"","d3":"","d4":"","d5":"66.38","label":"平江区"},{"d1":"","d2":"","d3":"25.46","d4":"","d5":"24.46","label":"沧浪区"},{"d1":"57.82","d2":"21.24","d3":"","d4":"","d5":"","label":"高新区"},{"d1":"","d2":"51.72","d3":"","d4":"","d5":"","label":"吴中区"},{"d1":"","d2":"","d3":"69.16","d4":"","d5":"","label":"金阊区"},{"d1":"","d2":"39.48","d3":"","d4":"","d5":"","label":"相城区"}]);
codg.totalPage=20; // 一共有多少页
codg.totalRecords=100//一共有多少条记录  

整体页面分格如下


请大家多多指点