Extjs : Events

Software driven events

Create an object of Observable

var myObservable = new Ext.util.Observable();

Add custom events

myObservable.addEvents('sayHello');
// or
myObservable.addEvents({
  'sayHello' : true // enabled by default
});

Register event handler

myObservable.on('sayHello', function() {
  console.log('Hello stranger');
});
// myObservable.on is the shorthand for myObservable.addListener

Fire the event

myObservable.fireEvent('sayHello');

If we want to pass parameters

myObservable.addEvents('sayHello');
var sayGoodbyeFn = function(firstName, lastName) {
console.log('Goodbye ' + firstName + ' ' + lastName + '!');
}
myObservable.on('sayGoodbye', sayGoodbyeFn);
myObservable.fireEvent('sayGoodbye', 'Holly', 'Cow');

Remove listeners

myObservable.un('sayGoodbye', sayGoodbyeFn);
// myObservable.un is the shorthand for myObservable.removeListener

Originally from [ Ext JS in Action by Jesus Garcia ]


Complete Example

Ext.onReady(function() {
	Ext.define('Test', {
		extend : 'Ext.util.Observable',
		constructor : function(config) {
			this.name = config.name;
			this.addEvents({
				'test' : true
			});
			this.listeners = config.listeners;
			this.callParent(arguments);
		}
	});

	var test = new Test({
		name : 'Test X',
		listeners : {
			test : function(param_x, param_y) {
				console.log('initiating ' + this.name + ' : ' + param_x +  ': ' + param_y);
			}
		}
	});	
	test.fireEvent('test', 'x', 'y');		
});
// http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable

result : initiating Test X : x : y

For more details Extjs docs

Advertisements
Tagged ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: