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

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

?

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

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

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

?

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

?

監(jiān)聽事件

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

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

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

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);}}});

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

配置驅(qū)動的事件

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

這一次，我們的自來水處理程序要調(diào)用this.setWidth（）到我們的按鈕上設(shè)置一個隨機的寬度。立即我們的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);}}});

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

以后添加偵聽器

每一個例子，到目前為止，已在類被實例化時，聽眾參與通過。如果我們已經(jīng)有一個實例，但是，我們?nèi)匀豢梢栽黾勇牨娫谝院笫褂蒙系墓δ?#xff1a;

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");});

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

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

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);}});

刪除監(jiān)聽器

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

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

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);

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

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');}}}});

監(jiān)聽器選項

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

范圍

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

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

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());}}});

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

單

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

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");}}}});

緩沖區(qū)

對于被觸發(fā)的事件，在短時間內(nèi)連續(xù)地多次，我們可以油門我們的監(jiān)聽器被調(diào)用，通過使用緩沖配置的數(shù)目的次數(shù)。在這種情況下，我們的按鈕的自來水監(jiān)聽器將被調(diào)用每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");}}}});

射擊自己的事件

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

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延遲觸發(fā)的功能，自定義事件，這2秒的時間。當事件被觸發(fā)時，我們MyEvent的監(jiān)聽器拿起它提醒我們傳入的參數(shù)

結(jié)論

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

• 了解組件
• 理解類系統(tǒng)

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

轉(zhuǎn)載于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834760.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。