May 09, 2021 Extjs
The event is triggered when the class occurs. /b10> For example, when a button is clicked or an element is rendered before/after.
Ext JS provides listener properties for writing events and customizing events in Ext JS files.
Write listeners in Ext JS
We'll add the listener to the previous program by adding the listen property to the panel, as follows:
<!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="/attachements/w3c/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>
This results in the following:
This allows us to write multiple events in the listeners property.
Multiple events in the same listener
<!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="/attachements/w3c/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>
In the previous method of writing events, we write events in the listener when we create elements.
Other ways are to attach events in as:
<!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="/attachements/w3c/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>
We can write custom events in ext JS and use the fireEvent method to trigger events, and the following example explains how to write custom events.
<!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="/attachements/w3c/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>
Once the page is loaded and the document is ready, the UI page and button appear, and we trigger the event document in 5 seconds, and the alert box appears in 5 seconds.
Here we write a custom event, 'myEvent', and we trigger the event as button.fireEvent (eventName);
These are three ways to write events in Ext JS.