Extjs-events
提供：Dev Guides
Ext.js-カスタムイベントとリスナー
イベントは、クラスに何かが発生したときに発生するものです。 たとえば、ボタンがクリックされたとき、または要素がレンダリングされる前/後に。
イベントの書き込み方法
- リスナーを使用した組み込みイベント
- 後でイベントを添付する
- カスタムイベント
リスナーを使用した組み込みイベント
Ext JSは、Ext JSファイルにイベントとカスタムイベントを書き込むためのリスナープロパティを提供します。
- Ext JSでの書き込みリスナー*
listenプロパティをパネルに追加することにより、前のプログラム自体にリスナーを追加します。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
rel = "stylesheet"/>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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>上記のプログラムは、次の結果を生成します-
このようにして、listenersプロパティに複数のイベントを書き込むこともできます。
同じリスナー内の複数のイベント
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
rel = "stylesheet"/>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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>後でイベントを添付する
イベントを記述する以前の方法では、要素の作成時にリスナーでイベントを記述しました。 もう1つの方法は、イベントを添付することです。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
rel = "stylesheet"/>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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>上記のプログラムは、次の結果を生成します-
カスタムイベント
Ext JSでカスタムイベントを記述し、fireEventメソッドでイベントを発生させることができます。 次の例では、カスタムイベントを記述する方法について説明します。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
rel = "stylesheet"/>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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>ページが読み込まれ、ドキュメントの準備が整うと、ボタンのあるUIページが表示され、5秒後にイベントを発生させると、ドキュメントの準備が整います。 5秒後に警告ボックスが表示されます。
ここでは、カスタムイベント「myEvent」を作成し、button.fireEvent（eventName）;としてイベントを発生させています。
