Extjs4에서 Custom event 만들기

MVC모델을 권장하는 Extjs4에서는 Controller에서 view를 찾기 위해서 Component Query를 많이 쓰면, Controller와 View가 너무 연관되어 MVC 본연의 모습을 잃을 수 있다.

그나마 완벽한 해결책은 아니지만, Component Query를 최소화 하고, 코드를 간결하게 만들기 위해서 view를 만들 때, 자신만의 Event를 정의하여 controller에서 처리하게 하면 그나마 Controller와 View가 어느정도 독립성을 유지하는데 도움이 된다.

이를 위한 방법을 간결하게 정리하도록 한다.

다음과 같은 상황을 가정한다.

1. Panel내부에 toolbar가 있고, toolbar에 "추가"라고 되어 있는 버튼이 존재한다.

2. 이 버튼을 누르면, Panel이 'add' event를 줄 수 있도록 한다.

3. controller는 Panel 내부의 "추가"버튼까지 Component Query를 하지 않고, 단순히 Panel까지만 Component Query를 하여 'add'이벤트에 대한 핸들러를 추가하여 일을 마무리 한다.

// view file
Ext.define('MyApp.view.List', {
	extend: 'Ext.grid.Panel',
  alias: 'widget.mypanel',
	border: false,

	currentRecord: undefined,

	initComponent: function () {
		var me = this;

		this.addEvents('newwin');
		Ext.apply(this, {
			store: 'Teachings',
			columnLines: true,

			selModel: {
				selection: 'checkboxmodel'
			},
/********* 중략 *********/
			dockedItems: [{
				xtype: 'toolbar',
				items: [{
					text:'추가',
					tooltip:'새로운 교안을 작성합니다.',
					iconCls:'icon_add',
					action: 'add',
					listeners: {
						click: {
							fn: this.addEventEmitter,
							scope: this
						}
					}
				}]
/********* 후략 *********/
	addEventEmitter: function () {
this.fireEvent('add');
	}
});

이와 같이 하고 Controller에서는 이를 이용하여 이벤트 핸들러를 작성한다.

Ext.define('TeacherErp.controller.Teaching', {
	extend: 'Ext.app.Controller',

	stores: [
		'Teachings'
	],

	views: [
		'MyApp.List',
	],

	init: function () {
		this.control({
			'mypanel': {
				add: this.addHandler

요약하자면, 여기에서 custom event를 만들기 위한 순서는 다음과 같다.

1. 이벤트 이름('add')를 추가한다: this.addEvents('add');

2. 이벤트를 발생시킨다.: this.fireEvent('add');

3. 이벤트를 처리한다.

여기에서 중요한 것은 button의 listeners를 설정할 때, scope를 따로 준 것이다. 그렇지 않으면, 해당 이벤트 핸들러(addEventEmitter)의 this는 button이 되기 때문에 controller에서 MyApp.view.List를 component Query로 찾아서 이벤트를 연결해도 찾지 못한다. (단순히 이벤트 핸들러가 등록되지 않은 것이니 에러도 호출되지 않는다.)