Sencha Touch 2.4

显示私有类

顶部

内容

什么是事件？监听事件配置驱动的事件稍后添加监听器移除监听器监听器选项范围单一缓冲触发您自己的事件结论

了解和使用 Sencha Touch 中的事件

Sencha Touch 的组件和类在其生命周期的各个点触发广泛的事件。事件允许您的代码对周围的变化做出反应，并且是 Sencha Touch 中的一个关键概念。

什么是事件？

每当您的某个类发生一些有趣的事情时，就会触发事件。例如，当任何组件呈现到屏幕上时，其 painted 事件被触发。我们可以通过配置一个简单的 listeners 配置来监听该事件

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.create('Ext.Panel', { html: 'My Panel', fullscreen: true, listeners: { painted: function() { Ext.Msg.alert('我已绘制到屏幕上'); } } }); } });

当您单击上面的“实时预览”按钮时，您将看到一个呈现到屏幕上的面板，然后是定义的警报消息。类触发的所有事件都会在其 API 页面中列出 - 例如，在编写 Ext.Panel 时有 28 个事件

监听事件

虽然 painted 事件本身在某些情况下很有用，但还有其他事件更有可能被您使用。例如，按钮在每次被点击时都会触发 tap 事件

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.Viewport.add({ xtype: 'button', centered: true, text: 'My Button', listeners: { tap: function() { alert("您点击了我"); } } }); } });

您可以添加任意多个事件监听器。在以下示例中，我们将通过在 tap 监听器中调用 this.hide() 来混淆用户以隐藏按钮，仅在 1 秒后再次显示它。当调用 this.hide() 时，按钮被隐藏，hide 事件被触发。hide 事件反过来触发我们的 hide 监听器，它在再次显示按钮之前等待一秒钟

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.Viewport.add({ xtype: 'button', centered: true, text: '我的按钮', listeners: { tap: function() { this.hide(); }, hide: function() { //等待 1 秒（1000 毫秒），然后再次显示按钮 Ext.defer(function() { this.show(); }, 1000, this); } } }); } });

每次触发事件时都会调用事件侦听器，因此你可以继续隐藏和显示按钮，直到永远。

配置驱动的事件

大多数类在运行时都是可重新配置的，这意味着你可以随时更改其配置，例如高度、宽度或内容，并且组件将在屏幕上正确更新自身。其中许多配置更改会触发事件的触发 - 例如，按钮的 24 个组件事件中有 14 个具有以下名称：widthchange、hiddenchange 和 centeredchange。

在以下示例中，tap 处理程序调用 this.setWidth() 为我们的按钮设置随机宽度。widthchange 侦听器会立即收到有关更改的通知，以及新旧宽度值

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.Viewport.add({ xtype: 'button', centered: true, text: '单击我', listeners: { tap: function() { var randomWidth = 100 + Math.round(Math.random() * 200); this.setWidth(randomWidth); }, widthchange: function(button, newWidth, oldWidth) { alert('我的宽度已从 ' + oldWidth + ' 更改为 ' + newWidth); } } }); } });

以“change”结尾的每个事件都是由于已更改的配置选项而触发的。请注意，尽管侦听这些事件就像侦听任何其他事件一样，但了解该约定很有用。

稍后添加侦听器

以前的示例涉及在实例化类时传递侦听器。但是，如果我们已经有一个实例，我们仍然可以使用 on 函数稍后添加侦听器

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var myButton = Ext.Viewport.add({ xtype: 'button', centered: true, text: '单击我' }); myButton.on('tap', function() { alert("通过 .on 附加的事件侦听器"); }); } });

通过这种方式，你可以在任何时候添加新的侦听器。你还可以结合这些方法，并且如果需要，甚至可以多次侦听同一事件，如下例所示

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var myButton = Ext.Viewport.add({ xtype: 'button', centered: true, text: '单击我', listeners: { tap: function() { alert('第一个 tap 侦听器'); } } }); myButton.on('tap', function() { alert("第二个 tap 侦听器"); }); } });

在这种情况下，将调用两个已定义的事件侦听器函数，保留添加它们的顺序。

最后，你可以使用 .on 方法指定多个侦听器，类似于使用侦听器配置。以下代码重新审视了设置按钮随机宽度的上一个示例

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var myButton = Ext.Viewport.add({ xtype: 'button', centered: true, text: '单击我' }); myButton.on({ tap: function() { var randomWidth = 100 + Math.round(Math.random() * 200); this.setWidth(randomWidth); }, widthchange: function(button, newWidth, oldWidth) { alert('我的宽度已从 ' + oldWidth + ' 更改为 ' + newWidth); } }); } });

删除侦听器

就像我们可以在任何时候添加侦听器一样，我们也可以删除它们，这次使用 un。为了删除侦听器，我们需要引用其函数。在前面的示例中，我们刚刚将一个函数传递到侦听器对象或 .on 调用中，这次我们提前创建了该函数并将其链接到名为 doSomething 的变量中。

由于最初我们将新的 doSomething 函数传递到侦听器对象中，因此一开始代码像以前一样工作。由于我们最终添加了一个 Ext.defer 函数，该函数在 3 秒后删除侦听器，因此在最初的 3 秒内单击按钮会产生警报消息，但 3 秒后侦听器将被删除，因此不会发生任何事情

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var doSomething = function() { alert('调用处理程序'); }; var myButton = Ext.Viewport.add({ xtype: 'button', text: '我的按钮', centered: true, listeners: { tap: doSomething } }); Ext.defer(function() { myButton.un('tap', doSomething); }, 3000); } });

在以下示例中，我们使用与前面代码示例中类似的按钮，但这次我们还添加了一个切换按钮，该按钮会在你切换它时添加和删除 tap 侦听器。侦听器最初被禁用，使用切换按钮启用它，然后禁用它

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var myButton = Ext.Viewport.add({ xtype: 'button', centered: true, text: '已禁用监听器' }); var handler = function() { alert('调用监听器'); }; Ext.Viewport.add({ xtype: 'togglefield', docked: 'bottom', label: '切换监听器', listeners: { change: function(field, thumb, enabled) { if (enabled) { myButton.on('tap', handler); myButton.setText('已启用监听器'); } else { myButton.un('tap', handler); myButton.setText('已禁用监听器'); } } } }); } });

监听器选项

您可以将许多其他选项传递到监听器中。

范围

范围设置处理函数中this 的值。默认情况下，this 设置为触发事件的类的实例，这通常（但并非总是）是您想要的功能。此功能允许我们在本指南开头处的第二个示例中调用 this.hide() 来隐藏按钮。

在以下示例中，我们创建了一个按钮和一个面板，然后使用在面板范围内运行的处理程序侦听按钮的“tap”事件。为了做到这一点，我们需要传递一个对象而不是处理函数 - 此对象包含函数和范围

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var myButton = Ext.Viewport.add({ xtype: 'button', centered: true, text: '点击我' }); var panel = Ext.create('Ext.Panel', { html: '面板 HTML' }); myButton.on({ tap: { scope: panel, fn: function() { alert("在面板范围内运行"); alert(this.getHtml()); } } }); } });

运行此示例时，this 在 tap 处理程序中的值是面板。为了查看这一点，我们已将面板的 html 配置设置为“面板 HTML”，然后在处理程序中发出 this.getHtml() 的警报。当点击按钮时，我们确实看到面板的 html 已发出警报。

单一

有时我们只想监听事件一次。事件本身可能会触发任意次数，但我们只想监听一次。以下代码说明了这种情况

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var myButton = Ext.Viewport.add({ xtype: 'button', centered: true, text: '点击我', listeners: { tap: { single: true, fn: function() { alert("我只会说一次"); } } } }); } });

缓冲

对于在短时间内触发多次的事件，我们可以通过使用缓冲配置来减少调用监听器的次数。在这种情况下，无论您单击按钮多少次，按钮的 tap 监听器每 2 秒只调用一次

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var myButton = Ext.Viewport.add({ xtype: 'button', centered: true, text: '点击我', listeners: { tap: { buffer: 2000, fn: function() { alert("我每 2 秒只会说一次"); } } } }); } });

触发您自己的事件

通过使用任何事件名称调用 fireEvent 来触发您自己的事件。在以下示例中，我们触发一个名为 myEvent 的事件，该事件传递两个参数 - 按钮本身和 1 到 100 之间的随机数

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var myButton = Ext.Viewport.add({ xtype: 'button', centered: true, text: "只需等待 2 秒", listeners: { myEvent: function(button, points) { alert('触发了 myEvent！您获得了 ' + points + ' 分'); } } }); Ext.defer(function() { var number = Math.ceil(Math.random() * 100); myButton.fireEvent('myEvent', myButton, number); }, 2000); } });

我们再次使用 Ext.defer 来延迟触发自定义事件的函数，这次延迟 2 秒。触发事件时，myEvent 监听器会接收该事件并显示我们传递的参数。

结论

事件是 Sencha Touch 的关键部分，可让您的应用了解系统中的更改。如果您不熟悉 Sencha Touch，我们建议阅读以下指南，以更好地了解一切如何运作

内容

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

获取器和设置器方法

历史记录栏

搜索和筛选器

API 文档类元数据

展开和折叠示例和类成员

桌面 -vs- 移动视图

查看类源

Sencha Touch 2.4

内容

了解和使用 Sencha Touch 中的事件

什么是事件？

监听事件

配置驱动的事件

稍后添加侦听器

删除侦听器

监听器选项

范围

单一

缓冲

触发您自己的事件

结论

Sencha Touch 2.4