Ext.js 自定義事件和監(jiān)聽(tīng)器

2022-05-20 17:11 更新

事件是在類(lèi)發(fā)生的時(shí)候觸發(fā)的。 例如,當(dāng)一個(gè)按鈕被點(diǎn)擊或元素被渲染之前/之后。

寫(xiě)事件的方法:

  1. 內(nèi)置事件使用偵聽(tīng)器
  2. 附加事件監(jiān)聽(tīng)
  3. 自定義事件

內(nèi)置事件使用偵聽(tīng)器

Ext JS提供了用于在Ext JS文件中編寫(xiě)事件和自定義事件的偵聽(tīng)器屬性。

在Ext JS中編寫(xiě)偵聽(tīng)器

我們將通過(guò)在面板中添加listen屬性來(lái)將監(jiān)聽(tīng)器添加到上一個(gè)程序中,如下所示:

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button', listeners: { 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>

這會(huì)產(chǎn)生以下結(jié)果:


這樣我們可以在listeners屬性中寫(xiě)多個(gè)事件。

同一個(gè)偵聽(tīng)器中的多個(gè)事件

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
      <script type="text/javascript" src="./ext-6.0.0/build/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>

運(yùn)行效果如下:

附加事件監(jiān)聽(tīng)

在前面的寫(xiě)事件的方法中,我們?cè)趧?chuàng)建元素時(shí)在偵聽(tīng)器中寫(xiě)入事件。

也可以在之后的代碼中使用附加事件監(jiān)聽(tīng)的方式:

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="./ext-6.0.0/build/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>

運(yùn)行結(jié)果如下:


自定義事件

我們可以在ext JS中編寫(xiě)自定義事件,并使用fireEvent方法觸發(fā)事件,下面的示例解釋了如何編寫(xiě)自定義事件。

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="./ext-6.0.0/build/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>

運(yùn)行結(jié)果如下(為了節(jié)省展示時(shí)間,圖中效果使用2秒的定時(shí)器):


一旦頁(yè)面被加載并且文檔準(zhǔn)備就緒,UI頁(yè)面與按鈕將出現(xiàn),并且我們?cè)?秒后觸發(fā)事件文檔準(zhǔn)備就緒,警報(bào)框?qū)⒃?秒后出現(xiàn)。

這里我們寫(xiě)了自定義事件\'myEvent\',我們將事件觸發(fā)為button.fireEvent(eventName)


以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)