我曾看到过一种现象，就是时下讨论着组件间如何交流通迅的人并不在少数，还有怎么使用这个relayEvents()函数。
没错，我也存在过相类似的问题。我现在终于明白，relayEvents()函数用在什么地方了，这是我写好一个程序后的收获。
现在不算太难搞了，可以说迎刃而解，也知道怎么把它运用起来。
代码解析
网页
网页文件本身是比较清晰直观的，如果你试过例子中的文件那么便能迅速了解这份JavaScript文件。接着以下三份文件将会作简单地说明：
* wcc.tree.js
* wcc.app.js
* relayEvents.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Relay Events</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="wcc.tree.js"></script>
<script type="text/javascript" src="wcc.app.js"></script>
<script type="text/javascript" src="relayEvents.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js">
</script><!-- EXAMPLES -->
<h1>Ext.relayEvents</h1>
<button id="theBtn">Run</button>
<p>这是没有经过混淆的文件便于阅读：
<ul style="margin-left:100px;">
<li><a href="wcc.tree.js">wcc.tree.js</a></li>
<li><a href="wcc.app.js">wcc.app.js</a></li>
<li><a href="relayEvents.js">relayEvents.js</a></li>
</ul>
</p>
</body>
</html>
自定义TreePanel
第一份文件(wcc.tree.js)，是我自定义标准树TreePanel的扩展。另一种方式，将配置项作为参数传入的方式TreePanel，但是我没有使用这种方式，而是在我的程序中扩展后，周而复始地不断使用，简单地创建一个新扩展，不断实现化它就可以反复地使用。
我新建了一个treeLoader对象，使得采用“GET”的http请求进行通信，然后将onclick处理函数分配在每一个新建的节点上。
每个不同的节点或分支点击后都会触发自定义的事件“clickLeaf”或“clickBranch”，执行onclick处理函数。
/**
* 自定义的Tree，进行一些典型的设置，还有把TreeSorter对象新添加的事件加入到该组件中。
*/
Ext.ns("wcc"); // 建立属于自己部分的命名空间
wcc.tree = Ext.extend(Ext.tree.TreePanel, {
initComponent: function() {
// 开始配置组件！
this.rootID = this.rootID ? this.rootID : Ext.id();
Ext.apply(this, {
// 默认的配置项
animate:true,
autoScroll:true,
enableDD:true,
containerScroll: true,
// 定义tree loader
loader: new Ext.tree.TreeLoader( {
url : this.url,
requestMethod : "GET",
createNode : function( attr ) {
// 哪一种要触发的事件类型？
var NodeEvent = attr.leaf ? "clickLeaf" : "clickBranch";
attr.listeners = {
click : function( obj, evt, scope) {
// 触发自定义的事件
this.ownerTree.fireEvent(NodeEvent, this, attr, attr.text);
}
};
// 执行原来的方法
return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
}
}),
root : new Ext.tree.AsyncTreeNode({
text: this.rootID,
id : this.rootID,
expanded : true,
draggable : false
})
});
wcc.tree.superclass.initComponent.apply(this, arguments);
new Ext.tree.TreeSorter(this, {folderSort:true});
// 单击树节点时就会触发这两个新事件
this.addEvents( 'clickLeaf', 'clickBranch');
}
});
Ext.reg('wccTree', wcc.tree);
以下代码才是真正的自定义过程：
this.ownerTree.fireEvent(NodeEvent, this, attr, attr.text);
this.ownerTree代表wcc.tree的实例，触发刚才设置的事件，看看是“clickLeaf”还是“clickBranch”。
刚才这一行：
this.addEvents( 'clickLeaf', 'clickBranch' );
就是执行这里定义好的扩展事件。
Application Class
ok现在我们已经弄好一个TreePanel，并为将来的事件预留了相应的位置，接下来我们干什么好呢？
嗯我们看看qcc.app.js文件内的application class（我把涉及的类都封装在这个application中）。
强调一次这里没啥特别的地方，我尝试在“wcc”的命名空间中创建新类，里面的私有变量和方法可为不同的面板和窗体所服务。
wcc.app = function() {
// 私有的变量……
var win;
var button;
// 私有的方法……
var buildApp = function( cfg ) {
// 这是公有的配置
var dfltCfgParams = {
split : true,
collapsible : true,
margins : "3 0 3 3",
cmargins : "3 3 3 3"
};
// 设置导航树的配置项参数
var treeParams = Ext.apply( {
region : "west",
width : 200,
frame : true,
title : "Navigation"
}, cfg );
// 创建树面板
var tree = new wcc.tree(
Ext.apply( treeParams, dfltCfgParams )
);
// 创建content面板
var content = new Ext.Panel(Ext.apply({
title : "Content",
region : "center",
frame : true
}, dfltCfgParams ));
// 创建一个border layout风格的窗体，有tree和content面板
win = new Ext.Window({
title : 'Layout Window',
closable : true,
width : 600,
height : 350,
plain : true,
layout : 'border',
items : [ tree, content ]
});
// 关联tree的自定义事件“clickLeaf”和“clickBranch”
win.relayEvents(tree, ['clickLeaf', 'clickBranch']);
// 提供TreePanel对象的自定义处理函数。
// 例子中没有特别出彩的地方不过你可以加入更多
win.on( {
'clickLeaf' : function (nodeObj, nodeAttr, nodeText) {
console.log("Window - NodeClick - " + nodeText);
content.body.update("Hello World... Loading Text from Leaf: " + nodeObj.id);
},
'clickBranch' : function(nodeObj, nodeAttr, nodeText) {
console.log("Window - BranchClick - " + nodeText);
content.body.update("Hello World... Loading Text from Branch: " + nodeObj.id);
},
scope : this
});
};
// Public部分
return {
myTree : {},
root : {},
// 实际上我想把写好的类规范好以便调试和归档，但现在不是“产品的代码”
name : "wcc:App",
desc : "Generic App Class in private Namespace",
init : function(cfg) {
this.curFunc = this.name + ".init()";
button = Ext.get("theBtn");
button.on("click" , function() {
buildApp( cfg );
win.show(button);
});
}
}; // 返回公有部分（Public）
}();
再说一下这里关键的一行：
win.relayEvents(tree, ['clickLeaf', 'clickBranch']);
告诉这里的窗体可以中断并接着处理由Tree组件传入的“clickLeaf”和“clickBranch”事件。
最终一步
最后，这些代码就大功告成啦……
Ext.onReady( function() {
console.log("App running...");
wcc.app.init({
url : "getNodes.php",
rootID : "examples" // 此处为要显示的目录名称
});
}, wcc.app, true);
console.log("程序可以跑起来了……");
注意我是从别的TreePanel例子弄来的"getNodes.php"。
这样透过relayEvents()方法就可以简单而且灵活地事件编程，各组件之间的消息事件通信，和整个程序的层次结构、复杂的对象关系带来莫大的好处。
转http://www.extjs.com/learn/Tutorial:RelayEvents_%28Chinese%29
分享到：
相关推荐
1. **创建自定义事件类** - 首先，我们需要创建一个继承自`Event`类的新类。通常，我们会选择`flash.events.Event`或`mx.events.FlexEvent`作为基类，前者适用于基本事件，后者则为Flex框架提供了一些额外的属性和...
鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例鸿蒙自定义组件实例...
在JavaScript中，事件是用户与网页交互的基础。除了浏览器提供的原生事件，如点击、滚动和键盘事件，开发者还可以创建自定义事件来满足特定的应用需求。自定义事件允许开发者定义事件的类型、携带的数据以及触发的...
在Flex中，自定义组件和事件的使用对于创建功能丰富的用户界面至关重要。下面我们将详细探讨这两个主题。 ### 一、Flex自定义组件 #### 1. 创建自定义组件的原因 在Flex应用中，有时标准组件库提供的组件无法满足...
然后，你可以在需要的时候创建自定义事件对象，并将它们发送给事件接收者。以下是如何使用Qt的自定义事件的说明和示例： **使用说明：** 1. **定义自定义事件类型：** 创建一个继承自`QEvent`的子类，并在子类中...
Java 自定义事件是Java编程中一个重要的概念，它允许开发者创建自己的事件机制，以实现不同组件之间的通信。在Java中，事件处理主要依赖于事件源（Event Source）、事件（Event）和事件监听器（EventListener）。当...
C++创建自定义名称的文件夹 C++创建自定义名称的文件夹 C++创建自定义名称的文件夹 C++创建自定义名称的文件夹 C++创建自定义名称的文件夹 C++创建自定义名称的文件夹 C++创建自定义名称的文件夹 C++创建自定义名称...
在AutoCAD平台上，开发者可以利用ObjectARX（Autodesk Reactor Extension）库来创建自定义实体，这是一种基于C++的编程接口，允许程序员深入到AutoCAD的内部工作流程，实现扩展功能和定制化操作。本篇文章将详细探讨...
事件通常由一个对象（称为事件源）生成，然后被传递到感兴趣的其他对象（称为事件监听器）。例如，当用户点击按钮时，按钮对象会触发一个ActionEvent，该事件会被注册为监听器的对象接收并处理。 二、自定义事件类 ...
C#中的标准事件委托类型是`EventHandler<TEventArgs>`，其中`TEventArgs`是自定义的事件参数类，用于传递事件发生时的相关信息。 定义自定义事件主要涉及以下步骤： 1. **定义事件委托**：首先，我们需要创建一个...
自定义组件允许开发者根据需求扩展Android系统原生组件的功能，或者创建全新的组件样式，从而实现个性化界面和交互效果。下面将详细介绍Android自定义组件的相关知识。 首先，我们要了解自定义组件的基本概念。在...
当一个事件发生时，Qt会创建一个对应的事件对象，然后将其插入到事件队列中。事件调度器（QEventLoop）会从队列中取出事件并分发给相应的接收者，通常是QObject的子类。接收者通过重写`event()`或`eventFilter()`...
Flex中的高级自定义组件开发是构建复杂用户界面的关键技术，它允许开发者超越基本组件的限制，以满足特定的业务需求和视觉设计。在创建高级组件时，了解并掌握一些核心方法的重写至关重要，这些方法涉及到组件的生命...
### uni-app 使用抖音微信自定义组件详解 #### 一、引言 随着移动互联网的发展，跨平台应用开发框架越来越受到开发者的青睐。其中，uni-app作为一款使用Vue.js语法进行多端开发的前端框架，凭借其高效、易用的特点...
在 Tapestry 5 框架中，自定义组件是扩展其功能的关键方式，它允许开发者根据特定需求创建个性化和可重用的 UI 元素。Tapestry 5 是一个强大的 Java Web 应用程序开发框架，它强调组件化、模块化以及声明式编程模型...
在Android开发中，自定义组件是一项重要的技能，它允许开发者根据特定需求创建具有独特功能和外观的视图。本教程将通过一个简单的“TestOurselfWidget”实例来讲解如何实现自定义组件。自定义组件可以增强应用的用户...
在C#中，创建自定义组件和控件通常涉及继承自已有的UI类，如`System.Windows.Forms.UserControl`或`System.Windows.Forms.Control`，然后添加自己的属性、方法和事件。开发者可以通过重写OnPaint方法来实现自定义的...
"易语言自定义软件界面 组件移动例子"这个资源就是一个很好的学习材料，它帮助开发者理解如何在易语言中自定义软件界面并调整组件的位置。 易语言自定义界面的关键在于控件布局和事件处理。控件布局是指在界面上...
这里，`MyEventHandler`是事件委托的名称，`sender`参数代表触发事件的对象，`EventArgs`或其派生类通常用于传递与事件相关的数据。 2. **事件字段**：这是事件的私有实例，用于存储对该事件感兴趣的方法。使用`...
在C#编程中，组件、事件、委托和窗体自定义是构建用户界面和实现交互逻辑的核心概念。本文将深入探讨这些主题，帮助你更好地理解和应用它们。 首先，让我们谈谈“组件”。在C#中，组件是一种可重用的代码模块，它...