Обработка событий элементов и компонентов

Большое значение в Ext JS имеет модель событий. С помощью событий мы можем обрабатывать пользовательский ввод и контролировать ход выполнения приложения.

Для того, чтобы повесить обработчик события на элемент, нам надо использовать метод on класса Ext.Element, который является псевдонимом метода javascript addListener.

Итак, добавим для некоторого элемента <div id="content" >Привет мир</div> обработчик события click:

Ext.onReady(function(){
	var element = Ext.get('content');
	element.on('click', function(e, target, options){
		alert('Элемент был нажат');
	}, this);
});

Сначала функцией Ext.get мы получаем нужный элемент по id, потом в функции element.on. Первый аргумент этой функции - само событие, которое мы прослушиваем. Второй аргумент - функция обработчика этого события. В данном случае мы используем анонимную функцию. Третий параметр обозначает область действия обработчика (в данном случае это окно браузера).

Мы также можем передать в функцию on обработчик сразу для нескольких событий элемента:

Ext.onReady(function(){
	var element = Ext.get('content');
	element.on({
		click: function(e, target, options){
			alert('Элемент нажат!');
		},
		contextmenu: function(e, target, options){
			alert('На элемент нажали правой кнопкой!');
		},
		scope: this
	});
});

Чтобы добавить для элемента обработчики сразу для нескольких событий, мы создаем анонимный объект и внутри него объявляем пары ключ-значение, ключом является событие, а значением - функция обработчика этого события. Последний параметр - scope - указывает на область видимости.

Обработчики событий компонентов

Для добавления обработчиков событий у компонентов можно использовать параметр listeners, который, как и функция on, принимает в качестве анонимного объекта набор пар - событие и функция его обработчика:

Ext.onReady(function(){
	Ext.create('Ext.Button', {
		margin:'10 0 0 30',
		text: 'Жми здесь',
		renderTo: Ext.getBody(),
		listeners: { 
			click: function(){
				alert('Hello World');
			},
			scope:this
		}
	});
});

Здесь мы создаем кнопку и добавляем ей обработчик события click. По нажатию на кнопку выводим сообщение.

Делегация событий

Делегация событий позволяет вешать обработчик события на родительский элемент, при этом события будут обрабатываться на дочерних элементах, для которых они были делегированы. Эта техника очень действенна, так как позволяет вместо прикрепления обработчиков к каждому отдельному элементу, обрабатывать события сразу нескольких элементов.

Определим к примеру следующий код разметки html:

<div id="content" >
	<div id="text" >Текст1</div>
	<div>Текст2</div>
	<div id="text" >Текст3</div>
	<div>Текст4</div>
</div>

Добавим для элементов с идентификатором text обработчик события click:

Ext.onReady(function(){
	var element = Ext.get('content');
	element.on('click', function(e, target, options){
		alert(target.innerHTML);
	}, this, {
		delegate: '#text'
	});
});

С помощью параметра delegate мы прикрепляем обработчик события click к тем элементам, у которых id="text". Используя переданный в качестве аргумента в обработчик параметр target получаем элемент, на котором произведено нажатие.

Технически при делегировании событий происходит проверка элемента, на котором произведено событие. Так, мы могли бы опустить параметр delegate и с помощью метода getTarget объекта Ext.EventObject проверять объект события:

Ext.onReady(function(){
	var element = Ext.get('content');
	element.on('click', function(e, target, options){
		var obj = e.getTarget('#text', this);
		if(!obj) { return};
		alert(target.innerHTML);
	}, this);
});

Комбинируя оба подхода, можно создать возможность выбора хода программы в зависимости от того, для какого элемента возникло событие. Например, определим на веб-странице простое меню:

<ul id="menu" >
<li class='buy'>Купить</li>
<li class='sell'>Продать</li>
<li class='exit'>Выход</li>
</ul>

Теперь в зависимости от того, какой пункт меню был нажат, будем производить те или иные действия:

Ext.onReady(function(){
	var element = Ext.get('menu');
	element.on('click', function(e, target, options){
		if(e.getTarget('li .buy')) { 
			alert('Покупка');
		}
		else if(e.getTarget('li .sell')) { 
			alert('Продажа');
		}
		else if(e.getTarget('li .exit')) { 
			alert('выход');
		}
	}, this, {
		delegate: 'li'
	});
});

С помощью метода getTarget выясняем, над какой пункт меню нажали выводим определенное сообщение.