JavaScript DHTML/Ext JS/Event
Содержание
Create instance of Ext.util.Observable, add event handler and fire event
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myComponent = new Ext.util.Observable();
myComponent.addEvents("myEventName");
myComponent.on("myEventName", function() {
alert("asdf");
});
myComponent.fireEvent("myEventName");
}); </script>
</body> </html>
</source>
Custom event with more than one parameters
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var Component = Ext.extend(Ext.util.Observable, {
constructor : function() {
Component.superclass.constructor.call(this);
}
});
var myComponent = new Component();
myComponent.on("sayGoodbye", function(firstName, lastName) {
alert("Goodbye " + firstName + " " + lastName);
});
myComponent.fireEvent("sayGoodbye", "first", "last");
}); </script>
</body> </html>
</source>
Remove event Listener
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myComponent = new Ext.util.Observable();
myComponent.addEvents("myEventName");
var handlerFn = function(firstName, lastName) {
alert(firstName + " " + lastName);
}
myComponent.on("myEventName",handlerFn);
myComponent.fireEvent("myEventName","asdf","adsf");
myComponent.removeListener("myEventName", handlerFn);
}); </script>
</body> </html>
</source>
Unbind the action to the event handler
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myComponent = new Ext.util.Observable();
myComponent.addEvents("myEventName");
var handlerFn = function(firstName, lastName) {
alert(firstName + " " + lastName);
}
myComponent.on("myEventName",handlerFn);
myComponent.fireEvent("myEventName","asdf","adsf");
myComponent.un("myEventName", handlerFn);
}); </script>
</body> </html>
</source>
Use function as an event handler
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myComponent = new Ext.util.Observable();
myComponent.addEvents("myEventName");
var handlerFn = function(firstName, lastName) {
alert(firstName + " " + lastName);
}
myComponent.on("myEventName",handlerFn);
myComponent.fireEvent("myEventName","asdf","adsf");
}); </script>
</body> </html>
</source>
