flex自定义分页控件

最新推荐文章于 2016-05-17 14:27:35 发布

ycf330

最新推荐文章于 2016-05-17 14:27:35 发布

阅读量3.1k

点赞数

分类专栏： flex 文章标签： flex button function datagrid email object

本文链接：https://blog.csdn.net/ycf330/article/details/3862634

版权

flex 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

下午写做DataGrid的时候突然想到做过自定义分页控件，目的是为了写自定义控件，所以分页功能不够完善！

ComPage.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="548" height="38"> <mx:Script>  </mx:Script> <mx:HBox x="15" y="4" width="533"> <mx:Button label="首页" fontSize="12" id="first" click="setpag(1)"/> <mx:Button label="上一页" fontSize="12" id="up" click="setpag(-2)"/> <mx:Button label="下一页" fontSize="12" id="down" click="setpag(-3)"/> <mx:Button label="尾页" id="end" fontSize="12" click="setpag(-4)"/> <mx:ComboBox id="comb" width="58" editable="false" change="setpag(comb.selectedIndex+1)"></mx:ComboBox> <mx:TextInput width="36" id="inputpage"/> <mx:Button label="GO" click="goPage()"/> <mx:Label width="82" height="21" text="当前{currpag}/{pages}" fontSize="12"/> </mx:HBox> </mx:Canvas>

调用

DataTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
   <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var datas:ArrayCollection=new ArrayCollection([{username:"王治郅",phone:"1658999",email:"wzz@sohu.com"},
     {username:"巴特尔",phone:"1658998",email:"bater@sina.com"},
     {username:"姚明",phone:"1658997",email:"ym@163.com"}
     ]);
     private function add():void{
      if(ba.label=="增加")
       datas.addItem({username:a.text,phone:b.text,email:c.text});
      else{
       var item:Object=dg.selectedItem;
       var i:int=datas.getItemIndex(item);
       datas.removeItemAt(i);
       datas.addItemAt({username:a.text,phone:b.text,email:c.text},i);
       ba.label="增加";
      }
      cc();
     }
     private function cc():void{
      a.text="";
      b.text="";
      c.text="";
      ba.label="增加";
     }
     private function isv():void{
       pa.visible=ch.selected;
     }
     public function deletedate():void{
      var item:Object=dg.selectedItem;
      var i:int=datas.getItemIndex(item);
      datas.removeItemAt(i);
     }
     public function update():void{
      var item:Object=dg.selectedItem;
      a.text=item.username;
      b.text=item.phone;
      c.text=item.email;
      ba.label="修改";
     }
    ]]>
   </mx:Script>
<mx:ApplicationControlBar x="151" y="61" width="539" height="29">
  <mx:Label text="增删改功能" width="67"/>
  <mx:CheckBox id="ch" label="显示" change="isv()"/>
</mx:ApplicationControlBar>
<mx:Panel x="151" y="98" width="608" id="pa" height="374" layout="absolute" headerHeight="6" color="#0B333C" >
  <mx:Label x="10" y="10" text="姓名：" fontSize="12"/>
  <mx:Label x="162" y="10" text="电话：" fontSize="12"/>
  <mx:Label x="298" y="10" text="电子邮件：" fontSize="12"/>
  <mx:TextInput x="46" y="10" width="108" id="a"/>
  <mx:TextInput x="198" y="10" width="92" id="b"/>
  <mx:TextInput x="362" y="10" width="138" id="c"/>
  <mx:Button x="61" y="40" id="ba" label="增加" fontSize="12" click="add()"/>
  <mx:Button x="138" y="40" label="撤销" click="cc()" fontSize="12"/>
  <mx:DataGrid id="dg" x="10" y="81" width="548" dataProvider="{dddd.datas}">
   <mx:columns>
    <mx:DataGridColumn headerText="姓名" dataField="username"/>
    <mx:DataGridColumn headerText="电话" dataField="phone"/>
    <mx:DataGridColumn headerText="邮件" dataField="email"/>
    <mx:DataGridColumn headerText="操作" >
    <mx:itemRenderer>
                       <mx:Component>
                       <mx:HBox>
                       <mx:Button label="修改" fontSize="12" click="outerDocument.update()"/>
                        <mx:Button label="删除" fontSize="12" click="outerDocument.deletedate()"/>
                       </mx:HBox>
                       </mx:Component>
                   </mx:itemRenderer>
    </mx:DataGridColumn>
   </mx:columns>
  </mx:DataGrid>
  <ns1:ComPage id="dddd" x="20" y="298" height="39" setData="{datas}" setPag="2">
  </ns1:ComPage>
</mx:Panel>
</mx:Application>
写组件的时候不能使用<mx:Button label="上一页" fontSize="12" id="up" click="setpag({currpag})"/>，不知道为什么？去网上也没有相关的答案.