课程表

Ext.js课程

工具箱
速查手册

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

当前位置：免费教程 » JS/JS库/框架 » Ext.js

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

写事件的方法:

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

内置事件使用侦听器

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

在Ext JS中编写侦听器

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

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
  5.       <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
  6.       <script type="text/javascript">
  7.          Ext.onReady(function(){
  8.             Ext.create('Ext.Button', {
  9.                renderTo: Ext.getElementById('helloWorldPanel'),
  10.                text: 'My Button',
  11.                listeners: {
  12.                   click: function() {
  13.                      Ext.MessageBox.alert('Alert box', 'Button is clicked');	
  14.                   }
  15.                }
  16.             });
  17.          });
  18.       </script> 
  19.    </head>
  20.    <body>
  21.       <p> Please click the button to see event listener </p>
  22.       <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
  23.    </body>
  24. </html>

尝试一下

这会产生以下结果:

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
  5.       <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
  6.       <script type="text/javascript">
  7.          Ext.onReady(function(){
  8.             Ext.get('tag2').hide()
  9.             Ext.create('Ext.Button', {
  10.                renderTo: Ext.getElementById('helloWorldPanel'),
  11.                text: 'My Button',
  12.                listeners: {
  13.                   click: function() {
  14.                      this.hide();
  15.                   },
  16.                   hide: function() {
  17.                      Ext.get('tag1').hide();
  18.                      Ext.get('tag2').show();
  19.                   }
  20.                }
  21.             });
  22.          });           
  23.       </script> 
  24.    </head>
  25.    <body>
  26.    <div id = "tag1">Please click the button to see event listener.</div>
  27.    <div id = "tag2">The button was clicked and now it is hidden.</div>
  28.    <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
  29.    </body>
  30. </html>

尝试一下

稍后再附加事件

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
  5.       <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
  6.       <script type="text/javascript">
  7.          Ext.onReady(function(){
  8.             var button = Ext.create('Ext.Button', {
  9.                renderTo: Ext.getElementById('helloWorldPanel'),
  10.             text: 'My Button'
  11.             });
  12.  
  13.             // This way we can attach event to the button after the button is created.
  14.             button.on('click', function() {
  15.                Ext.MessageBox.alert('Alert box', 'Button is clicked');
  16.             });
  17.          });
  18.       </script> 
  19.    </head>
  20.    <body>
  21.       <p> Please click the button to see event listener </p>
  22.       <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
  23.    </body>
  24. </html>
  25.  

尝试一下

自定义事件

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

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
  5.       <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
  6.       <script type="text/javascript">
  7.          Ext.onReady(function(){
  8.             var button = Ext.create('Ext.Button', {
  9.                renderTo: Ext.getElementById('helloWorldPanel'),
  10.                text: 'My Button',
  11.                listeners: {
  12.                   myEvent: function(button) {
  13.                      Ext.MessageBox.alert('Alert box', 'My custom event is called');
  14.                   }
  15.                }
  16.             });
  17.             Ext.defer(function() {
  18.                button.fireEvent('myEvent');
  19.             }, 5000);
  20.          }); 
  21.       </script> 
  22.    </head>
  23.    <body>
  24.       <p> The event will be called after 5 seconds when the page is loaded. </p>
  25.       <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
  26.    </body>
  27. </html>

尝试一下

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

这里我们写了自定义事件\'myEvent\'，我们将事件触发为button.fireEvent（eventName）;

以上就是在Ext JS中编写事件的三种方式。

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号