Extjs 、Flex 组件通过事件解耦示例

阅读更多

Extjs 、Flex 组件通过事件解耦示例

---》application


   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*" click="trace('application...')">

import events.UiNameEvent;
private function cancelHandler(e:UiNameEvent):void{
trace("xxx"+e.type + e.time);
}
]]>







---》子组件

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="225" xmlns:components="components.*"
title="Warning: Something to be warned about!" click="trace('panel...')">

[Event(name="userAccept",type="flash.events.Event")]
[Event(name="userCancel",type="events.UiNameEvent")]


import events.UiNameEvent;

[Bindable]
public var warningText:String = "Some type of long-winded warning message describing a problem would most likely go here! Do you want to proceed?";

private function okHandler(e:Event):void{
trace(e.type);
}

private function cancelHandler(e:UiNameEvent):void{ //捕获userCancel 事件 并进行处理
trace(e.type + e.time);
}
]]>






--》孙组件


xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >

[Event(name="userAccept",type="flash.events.Event")]
[Event(name="userCancel",type="events.UiNameEvent")] //添加事件元数据


import events.UiNameEvent;

import flash.sampler.NewObjectSample;
private function ok_clickHandler():void{
this.dispatchEvent(new Event("userAccept"))
}

private function cancel_clickHandler():void{
this.dispatchEvent(new UiNameEvent("userCancel",new Date())); //触发事件 userCancel 事件
}
]]>










--》自定义事件
package events
{
import flash.events.Event;

public class UiNameEvent extends Event
{
public var time:Date; //自定义属性

public function UiNameEvent(type:String,time:Date)
{
super(type,true);//可以改成 super(type) 不让此事件冒泡
this.time = time;
}

override public function clone():Event{ //必须覆盖clone方法
return new UiNameEvent(type,time);
}
}
}


通过自定义事件 上述的孙组件的ok_clickHandler 不在处理逻辑，而是放到子组件上捕获这个自定义事件，再进行逻辑处理，这样孙组件就能得到复用，也进行了解耦和。