我曾看到过一种现象，就是时下讨论着组件间如何交流通迅的人并不在少数，还有怎么使用这个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
分享到：
相关推荐
在C#中，创建自定义组件和控件通常涉及继承自已有的UI类，如`System.Windows.Forms.UserControl`或`System.Windows.Forms.Control`，然后添加自己的属性、方法和事件。开发者可以通过重写OnPaint方法来实现自定义的...
创建自定义组件库是指创建一个组件库，然后在其中创建自定义组件。登录低码控制台，找到组件库管理菜单，点击【新建组件库】按钮，输入组件库的名称和标识。 创建自定义组件 创建自定义组件是指在组件库中创建一个...
1. **创建自定义事件类** - 首先，我们需要创建一个继承自`Event`类的新类。通常，我们会选择`flash.events.Event`或`mx.events.FlexEvent`作为基类，前者适用于基本事件，后者则为Flex框架提供了一些额外的属性和...
在JavaScript中，事件是用户与网页交互的基础。除了浏览器提供的原生事件，如点击、滚动和键盘事件，开发者还可以创建自定义事件来满足特定的应用需求。自定义事件允许开发者定义事件的类型、携带的数据以及触发的...
### 自定义事件与参数（C#） 在C#编程中，事件是一种特殊的委托类型，用于封装方法调用，这些方法通常响应对象状态的变化或其他动作的发生。事件是.NET框架中的一个核心概念，它允许对象之间进行通信，而无需彼此...
在Flex中，自定义组件和事件的使用对于创建功能丰富的用户界面至关重要。下面我们将详细探讨这两个主题。 ### 一、Flex自定义组件 #### 1. 创建自定义组件的原因 在Flex应用中，有时标准组件库提供的组件无法满足...
Java 自定义事件是Java编程中一个重要的概念，它允许开发者创建自己的事件机制，以实现不同组件之间的通信。在Java中，事件处理主要依赖于事件源（Event Source）、事件（Event）和事件监听器（EventListener）。当...
C++创建自定义文件名的文件 C++创建自定义文件名的文件 C++创建自定义文件名的文件 C++创建自定义文件名的文件 C++创建自定义文件名的文件 C++创建自定义文件名的文件 C++创建自定义文件名的文件 C++创建自定义...
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()`...
4. **标签文件（tag file）**：为了在页面上方便地使用自定义组件，通常会创建一个与组件关联的标签文件。这允许开发者使用XML语法来声明组件，并设置属性。 5. **资源库和命名约定**：组件需要放在特定的库中，...
关于"自定义事件"，这是为了让控件能够通知其容器（如宿主应用程序）发生了某些事件。在Delphi中，你可以通过声明一个带有`TNotifyEvent`类型的事件来创建自定义事件。例如，你可以创建一个名为`OnCustomEvent`的...
在 Tapestry 5 框架中，自定义组件是扩展其功能的关键方式，它允许开发者根据特定需求创建个性化和可重用的 UI 元素。Tapestry 5 是一个强大的 Java Web 应用程序开发框架，它强调组件化、模块化以及声明式编程模型...
在Android开发中，自定义组件是一项重要的技能，它允许开发者根据特定需求创建具有独特功能和外观的视图。本教程将通过一个简单的“TestOurselfWidget”实例来讲解如何实现自定义组件。自定义组件可以增强应用的用户...
这里，`MyEventHandler`是事件委托的名称，`sender`参数代表触发事件的对象，`EventArgs`或其派生类通常用于传递与事件相关的数据。 2. **事件字段**：这是事件的私有实例，用于存储对该事件感兴趣的方法。使用`...
在C#编程中，组件、事件、委托和窗体自定义是构建用户界面和实现交互逻辑的核心概念。本文将深入探讨这些主题，帮助你更好地理解和应用它们。 首先，让我们谈谈“组件”。在C#中，组件是一种可重用的代码模块，它...