Ext.js 自定義事件和監(jiān)聽器
2022-05-20 17:11 更新
事件是在類發(fā)生的時候觸發(fā)的。 例如，當一個按鈕被點擊或元素被渲染之前/之后。
寫事件的方法:
- 內(nèi)置事件使用偵聽器
- 附加事件監(jiān)聽
- 自定義事件
內(nèi)置事件使用偵聽器
Ext JS提供了用于在Ext JS文件中編寫事件和自定義事件的偵聽器屬性。
在Ext JS中編寫偵聽器
我們將通過在面板中添加listen屬性來將監(jiān)聽器添加到上一個程序中，如下所示:
<!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>
這會產(chǎn)生以下結(jié)果:
這樣我們可以在listeners屬性中寫多個事件。
同一個偵聽器中的多個事件
<!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>運行效果如下：
附加事件監(jiān)聽
在前面的寫事件的方法中，我們在創(chuàng)建元素時在偵聽器中寫入事件。
也可以在之后的代碼中使用附加事件監(jiān)聽的方式:
<!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>運行結(jié)果如下：
自定義事件
我們可以在ext JS中編寫自定義事件，并使用fireEvent方法觸發(fā)事件，下面的示例解釋了如何編寫自定義事件。
<!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>運行結(jié)果如下（為了節(jié)省展示時間，圖中效果使用2秒的定時器）：
一旦頁面被加載并且文檔準備就緒，UI頁面與按鈕將出現(xiàn)，并且我們在5秒后觸發(fā)事件文檔準備就緒，警報框?qū)⒃?秒后出現(xiàn)。
這里我們寫了自定義事件\'myEvent\'，我們將事件觸發(fā)為button.fireEvent（eventName）
以上內(nèi)容是否對您有幫助：
更多建議：