`
ynp
  • 浏览: 437083 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

相关推荐

    EXTJS 上传组件及示例

    开发者可以根据实际需求,通过调整配置、编写事件处理器以及利用EXTJS的其他组件和工具,打造出满足各种需求的文件上传功能。同时,要确保在使用过程中充分考虑安全性,确保应用的稳定性和用户数据的安全。

    extjs 3.1 组件 使用

    通过阅读ExtJS的源码,我们可以学习到事件处理、数据绑定、布局管理等高级特性,从而更好地优化代码和解决问题。 最后,工具在ExtJS开发中也起着重要作用。例如,Sencha Animator可以帮助创建动画效果,Sencha ...

    流程设计,extjs、flex、web下的流程设计

    总的来说,这些文件和标签涉及到的技术和工具都集中在Web环境下的流程设计和管理上,无论是EXTJS的组件化开发,Flex的富客户端展示,还是各种流程设计器的使用,都是为了实现更高效、更直观的业务流程自动化。...

    extjs,flex,dojo的理解

    extjs,flex,dojo的理解

    ExtJs各组件简单应用例子导入到eclipse即可

    通过以上步骤,你不仅能够成功导入并运行ExtJS组件的示例,还能在Eclipse这个熟悉的开发环境中进行学习和实践。了解每个组件的用法和配置,是掌握ExtJS的关键。记住,实践是检验知识的最好方式,动手尝试并不断试验...

    ExtJS编写的youtube视频播放组件 示例

    在"ExtJS编写的youtube视频播放组件 示例"这个主题中,我们将深入探讨如何使用ExtJS来开发一个YouTube视频播放器组件。 首先,让我们理解组件(Component)在ExtJS中的概念。组件是ExtJS应用程序的基本构建块,可以...

    EXTJS 4 树形表格组件使用示例

    在提供的压缩包文件"extjs4.1_TreeGrid"中,可能包含了一些EXTJS 4树形表格组件的示例代码和资源,通过学习和分析这些示例,你可以更好地理解如何在项目中应用这个组件。 总结来说,EXTJS 4的树形表格组件是一个...

    Extjs树分页组件扩展

    "Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...

    extjs portal组件代码

    为了进一步了解EXTJS Portal组件的用法,你需要熟悉EXTJS的MVC(Model-View-Controller)架构,理解如何创建和配置Components,以及如何处理用户交互事件。EXTJS的API文档是学习的关键资源,它提供了关于每个类、...

    EXTJS net 增删改查示例

    EXTJS 提供了一套完整的组件模型、数据绑定、事件处理机制,以及丰富的UI控件,使得开发者可以构建出交互性强、功能完善的Web应用。 在"EXTJS net 增删改查示例"中,我们将探讨如何使用EXTJS与后端网络接口(通常...

    深入浅出extjs(第二版)示例源码光盘

    深入浅出extjs(第二版)示例源码光盘,包含3.0.0,3.1.1,3.2.0

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    **ExtJS 3.0 常用组件介绍** ExtJS 是一款强大的JavaScript库,用于构建富客户端Web应用。在3.0版本中,它提供了一系列丰富的组件,这些组件可以帮助开发者构建功能丰富的用户界面。以下是一些ExtJS 3.0中的常用...

    extjs3.0 组件

    在学习EXTJS 3.0 时,通过实践示例(demo)是提高理解的最好方法。课程中的大量demo 将帮助你更好地掌握每个组件的用法,加深对EXTJS 工作原理的理解。你可以通过运行这些示例,亲自调整参数,观察结果,从而提升...

    几个不错的EXTJS拓展组件

    EXTJS是一种基于JavaScript的富客户端应用框架,专用于构建企业级的Web应用程序。EXTJS以其强大的数据绑定、灵活的布局...通过学习和使用这些组件,开发者能够更好地发挥EXTJS的优势,创造出更符合用户需求的Web应用。

    ExtJS静态使用示例

    通过实践这些示例,可以加深对ExtJS组件和API的理解,提升开发Web应用的能力。 总的来说,"ExtJS静态使用示例"提供了一个学习和实践ExtJS基础功能的机会,通过Grid、Panel和Tree的使用,可以帮助开发者掌握如何在...

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...

    extjs各种常用组件归纳总结

    extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等

    ExtJS 组件扩展

    3. **错误地new**:对于UI组件,ExtJS提供了一种称为xtype的机制,通过xtype可以实现组件的懒加载和延迟渲染,从而提高应用程序的整体性能。但在实际开发过程中,经常可以看到开发者直接使用`new`关键字创建组件实例...

    extjs3.0开发包含示例api

    示例代码是学习EXTJS 3.0的重要途径,通过查看和分析示例,开发者可以快速掌握各种组件的使用方法和功能。示例通常包括以下内容: 1. **基础组件示例**:如创建基本的按钮、文本框、下拉列表等。 2. **高级组件...

Global site tag (gtag.js) - Google Analytics