自定义组件,仿panel 在左下角显示Button

自定义组件,仿panel 在左上角显示Button

在Panel右上方加Button:

(1)页面*.mxml文件：
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
????????? xmlns:container="com.core.container.*">

?

?<container:MoreButtonPanel title="估型KPI信息" width="100%" height="50%" layout="horizontal" stateHost="{this}" id="morePanel">
??<mx:DataGrid width="100%" height="100%" id="kpiList" selectedIndex="0"
????? horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
??</mx:DataGrid>
?</container:MoreButtonPanel>

<fx:Script>
?//三个Button一起创建，不能识别，使用btn.addEventListener(MouseEvent.CLICK,function(){ Alert.show('11');});
?/*public function buttonHandler(type:String):void{
????Alert.show('btn');
???}
?*/
?
?可以在MoreButtonPanel.as中的回调函数传个event参数，这样可以识别点击了哪个按钮。
?public function buttonHandler(type:String,obj:Object):void{

?????Alert.show(obj.toString()+"----");
?????Alert.show(obj.id+"--"+obj.label);
???}

</fx:Script>

</s:TitleWindow>

(2) 上面需要使用的com.core.container.MoreButtonPanel.as文件：

package com.core.container
{
?import flash.events.MouseEvent;
?
?import mx.containers.Panel;
?import mx.controls.Button;
?
?public class MoreButtonPanel extends Panel
?{
??public var type:String;
??public var _mybtn:Button;
??public var _mybtn2:Button;
??public var _mybtn3:Button;
??public var stateHost:Object;
??
??public function MoreButtonPanel()
??{
???super();
??}
??
??protected override function createChildren(): void {???
???super.createChildren();??
???_mybtn = new Button();??????
???_mybtn.height=20;????????
???_mybtn.width=100;
???_mybtn.label = "PE 整信息";
???_mybtn.id = "kpiBtn";
???_mybtn.addEventListener(MouseEvent.CLICK,buttonHandler);????????
???this.rawChildren.addChild(_mybtn);?
???
???_mybtn2 = new Button();??????
???_mybtn2.height=20;????????
???_mybtn2.width=110;
???_mybtn2.label = "IPVPN Backbone";
???_mybtn2.id = "kpiBtn2";
???_mybtn2.addEventListener(MouseEvent.CLICK,buttonHandler);????????
???this.rawChildren.addChild(_mybtn2);
???
???_mybtn3 = new Button();??????
???_mybtn3.height=20;????????
???_mybtn3.width=100;
???_mybtn3.label = "路接口信息";
???_mybtn3.id = "kpiBtn3";
???_mybtn3.addEventListener(MouseEvent.CLICK,buttonHandler);????????
???this.rawChildren.addChild(_mybtn3);
??}
??protected override function layoutChrome(unscaledWidth: Number, unscaledHeight:Number):void {
???super.layoutChrome(unscaledWidth, unscaledHeight);
???_mybtn.move(this.width-_mybtn.width-23,6);?????????????? //定位
???_mybtn2.move(this.width-_mybtn.width-_mybtn2.width-23-5,6);
???//_mybtn3.move(this.width-_mybtn.width-_mybtn2.width-_mybtn3.width-23-5*2,6);
???_mybtn3.move(this.width-_mybtn.width-23,6);?
??}
??private function buttonHandler(event:MouseEvent):void
??{
???if(stateHost.hasOwnProperty('buttonHandler')){
????(stateHost['buttonHandler'] as Function).call(stateHost['buttonHandler'],type);
???}
??}

??//可以传递event,如果多个按钮，根据event.target来判断点击哪个铵钮
??/*private function buttonHandler(event:MouseEvent):void
??{
???if(stateHost.hasOwnProperty('buttonHandler')){
????(stateHost['buttonHandler'] as Function).call(stateHost['buttonHandler'],type,event.target);?//传递event的对象
???}
??}*/
?}
}

有一个问题，在页面上如何控制三个Button的位置？

?DisplayObject类及其子类中的localToGlobal () 方法和globalToLocal()方法：
?//Point将 point 对象从显示对象的（本地）坐标转换为舞台（全局）坐标。
?????var p:Point=this.views.morePanel._mybtn.localToGlobal(new Point(this.views.morePanel._mybtn.x,this.views.morePanel._mybtn.y));

（3）Meditor:

给button增加事件的两种方法：

第一种：
//记录Type,控制三个铵钮的显示
????if(Type=="Avai"||Type=="Deli"){
?????this.views.morePanel._mybtn3.visible = false;
?????//this.views.morePanel._mybtn3.includeInLayout=false;
?????this.views.morePanel._mybtn3.enabled=false;
?????//增加事件
?????this.views.morePanel._mybtn.addEventListener(MouseEvent.CLICK,function(){ Alert.show('11');});
?????this.views.morePanel._mybtn2.addEventListener(MouseEvent.CLICK,function(){ Alert.show('123');});
????}
????else if(Type=="Late"){
?????this.views.morePanel._mybtn.visible = false;
?????//this.views.morePanel._mybtn.includeInLayout=false;?
?????this.views.morePanel._mybtn.enabled=false;
?????//增加事件
?????this.views.morePanel._mybtn2.addEventListener(MouseEvent.CLICK,function(){ Alert.show('11');});
?????this.views.morePanel._mybtn3.addEventListener(MouseEvent.CLICK,function(){ Alert.show('123');});
????}

第二种： 调用MoreButtonPanel.as中命名的回调函数buttonHandler()

--------------------------------------

if(groupVis.numChildren>0){???????? // 是否有子结点
??groupVis.removeAllChildren();
}

?<mx:FormItem label="分" id="groupVis" includeInLayout="false" visible="false" />

----------------------------------------------------------

78.
[Bindable]
public var totalIndexArr:ArrayCollection=new ArrayCollection();

var cc:CheckBox=view.totalIndexArr[1];
??cc.selected=true;

if(grid.numChildren>0){
???????grid.removeAllChildren();
??????}
??????var len:int=groupArr.length;
??????var gridItem:GridItem;
??????var gridRow:GridRow;
??????var index:int=0;
??????//grid.x=this.width/2;
??????for(var k=0;k<len;k++){
???????if (index%3 == 0)
???????{
????????gridRow = new GridRow();???????? //增加一行
????????grid.addChild(gridRow);
???????}
???????index++;
???????var c:CheckBox=new CheckBox();
???????c.label=groupArr[k];
???????//c.data=groupArr[k];
???????//groupVis.addChild(c);
???????c.height = 20;???????????? //不设置height,width，将不显示
???????c.width = 80;
???????totalIndexArr.addItem(c);??//totalIndexArr?是一个ArrayCollection,它会绑定到gridRow里的checkbox
???????gridItem = new GridItem();
???????gridItem.addChild(c);
???????gridRow.addChild(gridItem);
??????}

http://hi.baidu.com/selina_1113/blog/item/589069050191f969020881d6.html

在数组(ArrayCollection)中使用[Bindable]标签时，无论是数组被替换还是数组中的元素改动，都会触发更新事件。

//选中的数
??private function selectedNum():int{
???var totalCheckBox:ArrayCollection = view.totalIndexArr;
???var k:int=0;
?????var num:int=totalCheckBox.length;
???for(var i:int=0;i<num;i++){
?????var c:CheckBox=totalCheckBox[i];
????if(c.selected){
?????k++;
?????groupNames+=c.label+",";
????}
???}
???return k;
??}

74、flex布局是不考虑组件是否处于可视状态。也就是说不论组件是否可视，它都会在区域中占空间。但你可以通过includeInLayout设置组件是否参与布局。要注意的是includeInLayout只影响组件是否处于容器的布局中而不影响组件是否处于可视状态。

111、在List组件中，你可以把allowMultipleSelection设为true，这样用户按着ctrl键可以选择多个项。

112、List组件中的selectedIndices/selectedItems为被选中的序号和项，它们均为Vector对像。

自定义组件,仿panel 在左下角显示Butt

热点推荐