Sencha-概念-Events(事件)（官網文檔翻譯10）

煎茶Touch 2的組件和類的觸發廣泛的事件，在其生命周期的不同點。活動讓你的代碼，它周圍的變化作出反應，并在煎茶觸摸是一個關鍵的概念。

?

觸發事件時，一些有趣的事情發生在一個類。例如，當任何組件被渲染到屏幕上畫事件被觸發。我們可以偵聽該事件通過配置一個簡單的監聽器的配置：

Ext.create('Ext.Panel',{html:'My Panel',fullscreen:true,listeners:{painted:function(){Ext.Msg.alert('I was painted to the screen');}}});

當你點擊上面“實時預覽”按鈕，你會看到面板的畫面呈現給我們的警告消息。一類引發的事件中列出的API頁-例如Ext.Panel在寫作的時候有28個事件：

?

將鼠標懸停在“事件”按鈕來快速查看哪些事件可

?

監聽事件

畫事件本身在某些情況下是有用的，但也有其他活動，你更可能使用。例如，按鈕的消防水龍頭事件時，他們正在挖掘：

Ext.Viewport.add({xtype:'button',centered:true,text:'My Button',listeners:{tap:function(){alert("You tapped me");}}});

，因為我們喜歡，我們可以添加盡可能多的事件偵聽器。在這里，我們要由的調用this.hide（）內我們的自來水監聽，隱藏按鈕，只顯示幾秒鐘后再次混淆我們的用戶。當this.hide（）被調用時，按鈕是隱藏的，發射的隱藏事件。從而觸發隱藏監聽，等待一秒鐘，然后再次顯示了按鈕的隱藏事件：

Ext.Viewport.add({xtype:'button',centered:true,text:'My Button',listeners:{tap:function(){this.hide();},hide:function(){//waits 1 second (1000ms) then shows the button againExt.defer(function(){this.show();},1000,this);}}});

事件偵聽器被稱為每次觸發事件，這樣你就可以繼續隱藏和顯示按鈕為所有的永恒。

配置驅動的事件

大多數類在運行時可重構-例如，您可以更改配置，如高度，寬度或內容在任何時候和組件正確地更新自己在屏幕上。許多這些配置更改觸發一個事件被觸發-例如按鈕的24事件14的名稱，像widthchange，hiddenchange和centeredchange的。

這一次，我們的自來水處理程序要調用this.setWidth（）到我們的按鈕上設置一個隨機的寬度。立即我們的widthchange偵聽器將通知的變化，隨著新的和舊的寬度值：

Ext.Viewport.add({xtype:'button',centered:true,text:'Click me',listeners:{tap:function(){var randomWidth =100+Math.round(Math.random()*200);this.setWidth(randomWidth);},widthchange:function(button, newWidth, oldWidth){alert('My width changed from '+ oldWidth +' to '+ newWidth);}}});

結尾的“變”中的每一個事件被觸發作為一個配置選項改變的結果。請注意，您就像任何其他的監聽這些事件，這是一個好的知道的公約。

以后添加偵聽器

每一個例子，到目前為止，已在類被實例化時，聽眾參與通過。如果我們已經有一個實例，但是，我們仍然可以增加聽眾在以后使用上的功能：

var myButton =Ext.Viewport.add({xtype:'button',centered:true,text:'Click me'});myButton.on('tap',function(){alert("Event listener attached by .on");});

在任何時候這種方式，您可以添加新的聽眾。我們也可以組合使用這些方法，甚至聽相同的事件不止一次，如果我們需要：

var myButton =Ext.Viewport.add({xtype:'button',centered:true,text:'Click me',listeners:{tap:function(){alert('First tap listener');}}});myButton.on('tap',function(){alert("Second tap listener");});

這兩個事件偵聽器的功能，被稱為保存的順序被添加進來

最后，我們可以指定多個監聽器使用。上，就像我們可以用一個監聽器配置。這是我們的隨機寬度設置按鈕：

var myButton =Ext.Viewport.add({xtype:'button',centered:true,text:'Click me'});myButton.on({tap:function(){var randomWidth =100+Math.round(Math.random()*200);this.setWidth(randomWidth);},widthchange:function(button, newWidth, oldWidth){alert('My width changed from '+ oldWidth +' to '+ newWidth);}});

刪除監聽器

正如我們可以在任何時候添加監聽器，我們可以刪除過，這次使用的聯合國。為了刪除監聽器，它的功能，我們需要一個參考。在上面的例子中，我們剛剛通過了一項功能，直接進入偵聽器對象。隨叫隨 ??到，這一次，我們要創建的函數，得更早一點，它鏈接到一個變量稱為doSomething的。

我們將通過我們的新的doSomething功能，為我們的聽眾對象，像以前一樣。然而這一次，我們將移除偵聽器的底部，3秒后再次添加Ext.defer功能。點擊該按鈕，在第3秒產生一個警告消息，3秒后取消，使我們的聽眾是什么也沒有發生：

var doSomething =function(){alert('handler called');};var myButton =Ext.Viewport.add({xtype:'button',text:'My Button',centered:true,listeners:{tap: doSomething}});Ext.defer(function(){myButton.un('tap', doSomething);},3000);

在這個例子中，我們添加一個按鈕像以前一樣，但這次還加入了切換按鈕，將自來水添加和刪除監聽器，切換。監聽器開始關閉禁用，使用切換按鈕，使后來又禁用它：

var myButton =Ext.Viewport.add({xtype:'button',centered:true,text:'Listener Disabled'});var handler =function(){alert('listener called');};Ext.Viewport.add({xtype:'togglefield',docked:'bottom',label:'Toggle Listener',listeners:{change:function(field, thumb, enabled){if(enabled){myButton.on('tap', handler);myButton.setText('Listener Enabled');}else{myButton.un('tap', handler);myButton.setText('Listener Disabled');}}}});

監聽器選項

有一些額外的選項，我們可以傳遞到聽眾。

范圍

這里面的處理函數范圍的值設置。默認情況下被設置為觸發事件，這是經常（但并不總是）你想要什么類的實例。這是允許的我們打電話this.hide，（）在第二個例子中隱藏按鈕附近開始本指南。

這一次，我們將創建一個按鈕和一個小組，然后聽取按鈕的“自來水”事件，我們的處理程序運行在小組的范圍。要做到這一點，我們需要傳遞的對象，而不是一個處理函數 - 這個對象包含了函數加上范圍：

var myButton =Ext.Viewport.add({xtype:'button',centered:true,text:'Click me'});var panel =Ext.create('Ext.Panel',{html:'Panel HTML'});myButton.on({tap:{scope: panel,fn:function(){alert("Running in Panel's scope");alert(this.getHtml());}}});

當你運行這個例子的價值在自來水處理小組。為了說明這一點，我們會設置小組的HTML配置“面板HTML”，然后提醒this.getHtml（）在我們的處理程序。當我們輕點按鈕，我們確實看到小組的HTML的通知。

單

有時候我們只需要聽一次的事件。事件本身可能觸發的次數，但我們只需要聽它一次。這很簡單：

var myButton =Ext.Viewport.add({xtype:'button',centered:true,text:'Click me',listeners:{tap:{single:true,fn:function(){alert("I will say this only once");}}}});

緩沖區

對于被觸發的事件，在短時間內連續地多次，我們可以油門我們的監聽器被調用，通過使用緩沖配置的數目的次數。在這種情況下，我們的按鈕的自來水監聽器將被調用每2秒一次，不管有多少次你點擊它：

var myButton =Ext.Viewport.add({xtype:'button',centered:true,text:'Click me',listeners:{tap:{buffer:2000,fn:function(){alert("I will say this only once every 2 seconds");}}}});

射擊自己的事件

射擊自己的事件是很簡單-你可以調用fireEvent與任何事件的名稱。在這種情況下，我們會觸發一個事件MyEvent的傳遞兩個參數- 1和100之間的數字按鈕本身：

var myButton =Ext.Viewport.add({xtype:'button',centered:true,text:"Just wait 2 seconds",listeners:{myEvent:function(button, points){alert('myEvent was fired! You score '+ points +' points');}}});Ext.defer(function(){var number =Math.ceil(Math.random()*100);myButton.fireEvent('myEvent', myButton, number);},2000);

我們再次用Ext.defer延遲觸發的功能，自定義事件，這2秒的時間。當事件被觸發時，我們MyEvent的監聽器拿起它提醒我們傳入的參數

結論

煎茶觸摸事件是一個重要組成部分，并隨時通知您的應用程序在系統中的變化。如果你是新的煎茶觸摸，我們建議檢查出這些指南，以獲得更好的接地一切是如何工作的：

• 了解組件
• 理解類系統

posted on 2012-12-26 21:18 CW.Liu 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834760.html

總結

以上是生活随笔為你收集整理的Sencha-概念-Events(事件)（官网文档翻译10）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。