EXTjs study notes (2)--event-driven

EXT events include two categories, one is browser events, the other is custom events.

1 Get the event source

entry function. Get the dom using Ext.get(), the keyword of the binding event is on

Ext.onReady(function() {
	Ext.get('test').on('click',function() {
	    alert("haha");
	});
});

<input type="button" id="test" value="测试">

2 Custom event binding

    1 Create a class

//Define a person prototype class: initialize the name and event name
Person = function(name) {
	this.name = name;
	//Define the event name
	this.addEvents('walk','eat','sleep');
};
//add custom event
//Through inheritance, the Person class has all the methods under Ext.util.Observable
Ext.extend(Person,Ext.util.Observable,{
	//Define a function called info
	info: function() {
		return this.name + "is" + event + 'ing.';
	}
});

    2 Bind events in the page

        

<script type="text/javascript">
			Ext.onReady(function() {
				var person = new Person('Lingo');
				person.on('walk',function() {
					Ext.Msg.alert(person.name + 'walk');
				});
				person.on('eat',function() {
					Ext.Msg.alert(person.name + 'eat');
				});
				person.on('sleep',function() {
					Ext.Msg.alert(person.name + 'sleep');
				});

                            Ext.get('test').on('click',function() {
			        person.fireEvent('walk');

                    )};

Important: Define the event name: addEvents('','','');

Trigger event: fireEvent();

The on-bound event can have multiple parameters, followed by event source, function, scope, compound parameter

on(event,fun,scope,{})

The composite parameters are single, delay, testId (default is 4), buffer