Ext.js 教程:自定义事件和监听器

事件是在类发生的时候触发的。 例如,当一个按钮被点击或元素被渲染之前/之后。

写事件的方法:

  1. 内置事件使用侦听器
  2. 稍后附加事件
  3. 自定义事件

内置事件使用侦听器

Ext JS提供了用于在Ext JS文件中编写事件和自定义事件的侦听器属性。

在Ext JS中编写侦听器

我们将通过在面板中添加listen属性来将监听器添加到上一个程序中,如下所示:

<!DOCTYPE html>
 <html>
    <head>
       <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
       <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
       <script type="text/javascript">
          Ext.onReady(function(){
             Ext.get(tag2).hide()
             Ext.create(Ext.Button, {
                renderTo: Ext.getElementById(helloWorldPanel),
                text: My Button,
                listeners: {
                   click: function() {
                      this.hide();
                   },
                   hide: function() {
                      Ext.get(tag1).hide();
                      Ext.get(tag2).show();
                   }
                }
             });
          });
       </script>
    </head>
    <body>
    <div id = "tag1">Please click the button to see event listener.</div>
    <div id = "tag2">The button was clicked and now it is hidden.</div>
    <div id = helloWorldPanel />   <!--  panel will be rendered here-- >
    </body>
 </html>
 

这会产生以下结果:

Ext.js 教程:自定义事件和监听器

这样我们可以在listeners属性中写多个事件。

同一个侦听器中的多个事件

<!DOCTYPE html>
<html>
 <head>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
 <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
 <script type="text/javascript">
 Ext.onReady(function(){
 Ext.get(tag2).hide()
 Ext.create(Ext.Button, {
 renderTo: Ext.getElementById(helloWorldPanel),
 text: My Button,
 listeners: {
 click: function() {
 this.hide();
 },
 hide: function() {
 Ext.get(tag1).hide();
 Ext.get(tag2).show();
 }
 }
 });
 });
 </script>
 </head>
 <body>
 <div id = "tag1">Please click the button to see event listener.</div>
 <div id = "tag2">The button was clicked and now it is hidden.</div>
 <div id = helloWorldPanel />   <!--  panel will be rendered here-- >
 </body>
</html>

稍后再附加事件

在前面的写事件的方法中,我们在创建元素时在侦听器中写入事件。

其他方式是附加事件在as:

<!DOCTYPE html>
<html>
 <head>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
 <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
 <script type="text/javascript">
 Ext.onReady(function(){
 var button = Ext.create(Ext.Button, {
 renderTo: Ext.getElementById(helloWorldPanel),
 text: My Button
 });

 // This way we can attach event to the button after the button is created.
 button.on(click, function() {
 Ext.MessageBox.alert(Alert box, Button is clicked);
 });
 });
 </script>
 </head>
 <body>
 <p> Please click the button to see event listener </p>
 <div id = helloWorldPanel />   <!--  panel will be rendered here-- >
 </body>
</html>

自定义事件

我们可以在ext JS中编写自定义事件,并使用fireEvent方法触发事件,下面的示例解释了如何编写自定义事件。

<!DOCTYPE html>
 <html>
    <head>
       <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
       <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
       <script type="text/javascript">
          Ext.onReady(function(){
             var button = Ext.create(Ext.Button, {
                renderTo: Ext.getElementById(helloWorldPanel),
                text: My Button,
                listeners: {
                   myEvent: function(button) {
                      Ext.MessageBox.alert(Alert box, My custom event is called);
                   }
                }
             });
             Ext.defer(function() {
                button.fireEvent(myEvent);
             }, 5000);
          });
       </script>
    </head>
    <body>
       <p> The event will be called after 5 seconds when the page is loaded. </p>
       <div id = helloWorldPanel />   <!--  panel will be rendered here-- >
    </body>
 </html>
 

一旦页面被加载并且文档准备就绪,UI页面与按钮将出现,并且我们在5秒后触发事件文档准备就绪,警报框将在5秒后出现。

这里我们写了自定义事件myEvent,我们将事件触发为button.fireEvent(eventName);

这些是在Ext JS中编写事件的三种方式。

作者:admin,如若转载,请注明出处:https://www.web176.com/extjs/11515.html

(0)
打赏 支付宝 支付宝 微信 微信
adminadmin
上一篇 2023年3月2日
下一篇 2023年3月2日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注