carl23934
12 Sep 2008, 12:41 PM
I have three functions that make XHR requests.
The third function cannot be called until both of the other two return data, so I came up with a way to allow generic events to be added to any object. I didn't see an easy way to create generic events.
Is there another way to do this? Am I doing too much to accomplish so little? It works great, and I spent way too much time getting this working, but I want to know if there is an easier way.
Hopefully someone else can use this as an example.
Here is a basic example that uses a button click event (rather than the success/failure of XHR) to fire another event and spit out an alert
HTML:
<html>
<head>
<title>Events Example</title>
<link rel="stylesheet" type="text/css" href="/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-2.2/ext-all-debug.js"></script>
<script type="text/javascript" src="events.js"></script>
</head>
<body>
<h1>Events Example</h1>
<BR>
Click the button to trigger a series of AJAX calls that will fire further events which trigger further AJAX<BR>
<BR>
<div id='clickMeButton1'></div>
<div id='clickMeButton2'></div>
</body>
</html>
events.js
actEvent = function(){
this.addEvents('sosloaded','qosloaded');
this.marksosloaded = function(actId) {
this.fireEvent('sosloaded', actId);
}
this.markqosloaded = function(actId) {
this.fireEvent('qosloaded', actId);
}
}//eo actEvent
Ext.extend(actEvent,Ext.util.Observable);
Ext.onReady(function() {
eventHolder = new actEvent();
eventHolder.on('sosloaded', function(actId){
alert('sosloaded event HANDLED for activity: \''+actId+'\'');
});
eventHolder.on('qosloaded', function(actId){
alert('qosloaded event HANDLED for activity: \''+actId+'\'');
});
var clickMe1 = new Ext.Button({
text: 'fire sosloaded event',
renderTo: 'clickMeButton1',
handler: function() {
eventHolder.marksosloaded('111');
}
}); //eo clickMe1
var clickMe2 = new Ext.Button({
text: 'fire sosloaded event',
renderTo: 'clickMeButton2',
handler: function() {
eventHolder.markqosloaded('222');
}
}); //eo clickMe2
}); //eo onReady
The third function cannot be called until both of the other two return data, so I came up with a way to allow generic events to be added to any object. I didn't see an easy way to create generic events.
Is there another way to do this? Am I doing too much to accomplish so little? It works great, and I spent way too much time getting this working, but I want to know if there is an easier way.
Hopefully someone else can use this as an example.
Here is a basic example that uses a button click event (rather than the success/failure of XHR) to fire another event and spit out an alert
HTML:
<html>
<head>
<title>Events Example</title>
<link rel="stylesheet" type="text/css" href="/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-2.2/ext-all-debug.js"></script>
<script type="text/javascript" src="events.js"></script>
</head>
<body>
<h1>Events Example</h1>
<BR>
Click the button to trigger a series of AJAX calls that will fire further events which trigger further AJAX<BR>
<BR>
<div id='clickMeButton1'></div>
<div id='clickMeButton2'></div>
</body>
</html>
events.js
actEvent = function(){
this.addEvents('sosloaded','qosloaded');
this.marksosloaded = function(actId) {
this.fireEvent('sosloaded', actId);
}
this.markqosloaded = function(actId) {
this.fireEvent('qosloaded', actId);
}
}//eo actEvent
Ext.extend(actEvent,Ext.util.Observable);
Ext.onReady(function() {
eventHolder = new actEvent();
eventHolder.on('sosloaded', function(actId){
alert('sosloaded event HANDLED for activity: \''+actId+'\'');
});
eventHolder.on('qosloaded', function(actId){
alert('qosloaded event HANDLED for activity: \''+actId+'\'');
});
var clickMe1 = new Ext.Button({
text: 'fire sosloaded event',
renderTo: 'clickMeButton1',
handler: function() {
eventHolder.marksosloaded('111');
}
}); //eo clickMe1
var clickMe2 = new Ext.Button({
text: 'fire sosloaded event',
renderTo: 'clickMeButton2',
handler: function() {
eventHolder.markqosloaded('222');
}
}); //eo clickMe2
}); //eo onReady