Flex 分页,事件Event

1.Page.mxml: (公用组件)

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="400" height="300" >
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   
   import zw.test.page.event.PageEvent;
   [Bindable]
   public var data:ArrayCollection=new ArrayCollection();
   [Bindable]
   public var gridColumns:Array;
   [Bindable]
   public var total:int;
   [Bindable]
   public var totalPage:int;
   [Bindable]
   public var curPage:int;
   
   public var pageSize:int;
   
   //public function set pageData(data:ArrayCollection,gridColumns:Array):void{
   public function set pageData(pageData:PageData):void{//set方法必须只有一个参数
    if(data==null){
     return;
    }
    data=pageData.data;
    gridColumns=pageData.gridColumns;
    total=pageData.total;
    pageSize=pageData.pageSize;
    totalPage=Math.ceil(total/pageSize);
    curPage=pageData.curPage;
   }
   
   protected function handlePage(page:int):void{
    if(page<1||page>totalPage||total==0){
     return ;
    }
    curPage=page;
    Alert.show('当前第'+curPage+'页');
    var event:PageEvent=new PageEvent(PageEvent.pageEvent);
    event.curPage=curPage;
    event.pageSize=pageSize; 
    this.dispatchEvent(event);
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" height="100%">
  <mx:DataGrid id="pageList" width="100%" height="100%" rowHeight="25" dataProvider="{data}" columns="{gridColumns}" />
 
  <s:HGroup width="100%" height="100%">
   <s:Label text="共{total}条记录"/>
   <s:Label text="第{curPage}页"/>
   <mx:Spacer width="100%"/>
   
   <s:Button id="firstPageBtn" toolTip="首页" click="handlePage(1)"/>
   <s:Button id="backPageBtn" toolTip="上一页" click="handlePage(curPage-1)"/>
   <s:Button id="nextPageBtn" toolTip="下一页" click="handlePage(curPage+1)"/>
   <s:Button id="lastPageBtn" toolTip="末页"  click="handlePage(totalPage)"/>
   <mx:NumericStepper id="pageVal" stepSize="1" minimum="1" height="23" maximum="{totalPage}" cornerRadius="0" value="{curPage}"/>
   <s:Button id="pageBtn" toolTip="跳转"  click="handlePage(pageVal.value)"/>
  </s:HGroup>
 </s:VGroup> 
</s:Group>

 

2.RoleList.mxml:         调用上面的Page.mxml

 

<?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:page="zw.test.page.*"                                        //引入Page.mxml
      minWidth="955" minHeight="600" creationComplete="init()">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:Panel title="Panel" width="100%" height="100%">
  <s:layout>
   <s:VerticalLayout/>
  </s:layout>
  
 
  <s:Label text="分页" width="30"/>
 
  <page:Page id="rolePage" width="100%" height="100%">
   <page:gridColumns>
    <mx:DataGridColumn headerText="名称" dataField="name"/>
    <mx:DataGridColumn headerText="类型" dataField="type"/>
   </page:gridColumns>
  </page:Page>
 </s:Panel>
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   
   import zw.test.page.event.PageEvent;
   import zw.test.page.vo.Role;
   private function init():void{
    var pageData:PageData=new PageData();
    
    var objArr:ArrayCollection=new ArrayCollection();
    
    var role:Role;
    role=new Role();
    role.name="wang wu";
    role.type=1;
    objArr.addItem(role);
    
    role=new Role();
    role.name="li si";
    role.type=2;
    objArr.addItem(role);
    
    pageData.data=objArr;
    pageData.total=6;
    pageData.pageSize=2;
    rolePage.pageData=pageData;
    
    //下一页按钮加Event :如何调用Page.mxml中的id="nextPageBtn"
    //nextPageBtn.addEventListener(MouseEvent.CLICK,testPage(2)); // 如何使用被包含的id
    rolePage.addEventListener(PageEvent.pageEvent,testPage);
   }
   
   public function testPage(event:PageEvent):void{
    var page:int=event.curPage;
    var pageData:PageData=new PageData();
    
    var objArr:ArrayCollection=new ArrayCollection();
    
    var role:Role;
    role=new Role();
    role.name="wang wu2";
    role.type=3;
    objArr.addItem(role);
    
    role=new Role();
    role.name="li si2";
    role.type=4;
    objArr.addItem(role);
    
    pageData.data=objArr;
    pageData.total=4;
    pageData.pageSize=2;
    pageData.curPage=2;
    rolePage.pageData=pageData;
    
    if(page==1){
     init();
    }
   }
   
  ]]>
 </fx:Script>
</s:Application>

 

3.vo:

 

package zw.test.page.vo
{
 public class Role
 {
  public var name:String; //修饰符public
  public var type:int;
  public function Role()
  {
  }
 }
}

 

4.PageData.as:       //封装分页所需的数据

 

package zw.test.page
{
 import mx.collections.ArrayCollection;

 public class PageData
 {
  public var data:ArrayCollection; //修饰符public
  public var gridColumns:Array;
  public var total:int=0;
  public var curPage:int=1;
  public var pageSize:int=20;
  public function PageData()
  {
  }
  /*
  public function set data(data:ArrayCollection):void{
   this.data=data;
  }
  public function get data():ArrayCollection{
   return data;
  }
  
  public function set gridColumns(gridColumns:Array):void{
   this.gridColumns=gridColumns;
  }
  public function get gridColumns():Array{
   return gridColumns;
  }
  */
 }
}

5.PageEvent.as:  //自定义的Event,用于分页

 

package zw.test.page.event
{
 import flash.events.Event;
 
 public class PageEvent extends Event
 {
  public static var pageEvent:String="page_event";
  public var curPage:int;
  public var pageSize:int;    //事件传值
  public function PageEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
  {
   super(type, bubbles, cancelable);
  }
 }
}