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

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

---》application

<?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:components="components.*" click="trace('application...')">
<fx:Script>
<![CDATA[
import events.UiNameEvent;
private function cancelHandler(e:UiNameEvent):void{
trace("xxx"+e.type + e.time);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<components:WarningDialog id="warningDialog" horizontalCenter="0" verticalCenter="0" userCancel="cancelHandler(event)"/>
</s:Application>

---》子组件
<?xml version="1.0" encoding="utf-8"?>
<s:Panel 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="225" xmlns:components="components.*"
title="Warning: Something to be warned about!" click="trace('panel...')">
<fx:Metadata>
[Event(name="userAccept",type="flash.events.Event")]
[Event(name="userCancel",type="events.UiNameEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
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);
}
]]>
</fx:Script>
<s:BitmapImage source="@Embed('assets/warning.png')" left="25" top="18"/>
<s:Label text="{warningText}" width="150" fontSize="12" top="20" left="215" height="121"/>
<components:OkayCancelGroup id="okCancelGroup" left="219" bottom="22" userAccept="okHandler(event)" userCancel="cancelHandler(event)"/>
</s:Panel>

--》孙组件

<?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" >
<fx:Metadata>
[Event(name="userAccept",type="flash.events.Event")]
[Event(name="userCancel",type="events.UiNameEvent")] //添加事件元数据
</fx:Metadata>
<fx:Script>
<![CDATA[
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 事件
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout/>
</s:layout>

<s:Button id="ok" label="Ok" click="ok_clickHandler()"/>
<s:Button id="cancel" label="Cancel" click="cancel_clickHandler()"/>
</s:Group>


--》自定义事件
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 不在处理逻辑，而是放到子组件上捕获这个自定义事件，再进行逻辑处理，这样孙组件就能得到复用，也进行了解耦和。