'2012/06'에 해당되는 글 2건

  1. 2012.06.29 Extjs4에서 Custom event 만들기 (1)
  2. 2012.06.28 [ExtJS 4] initComonent함수에서 Component Query 사용시 유의점 (1)
2012. 6. 29. 11:27

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로 찾아서 이벤트를 연결해도 찾지 못한다. (단순히 이벤트 핸들러가 등록되지 않은 것이니 에러도 호출되지 않는다.)


Trackback 0 Comment 1
  1. Favicon of http://5915.stlouiscores.com BlogIcon ghd 2013.07.21 05:05 address edit & del reply

    희미한 달빛이 샘물 위에 떠있으면,나는 너를 생각한다.

2012. 6. 28. 22:20

[ExtJS 4] initComonent함수에서 Component Query 사용시 유의점

ExtJS나 Sencha Touch를 사용하다보면, Component Query를 이용하여 Component를 검색하는 경우가 매우 많습니다.


별로 해당 사항은 없지만 initComponent함수내부에서 up/down함수를 이용하여 컴포넌트를 검색하는 순간이 있는데, 검색이 되지 않을 수 있습니다. 이는 초기화의 차이인데요. 부모의 초기화 함수를 호출 한 후, 실행하면 문제없이 검색이 됩니다.


initComponent: function() {
    var me = this;
    // The method doesn't exists yet in your extended class
    me.callParent(arguments);
    // Place the code here, after you have called the parent constructor.
}



참고 링크: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.AbstractContainer-method-down

Trackback 0 Comment 1
  1. Favicon of http://plk.lisseurghdle.com/ BlogIcon Lisseur GHD 2013.04.25 02:28 address edit & del reply

    다른 사람을 비웃지 말라, 자기의 행복이 영원한것이라고 누가 장담할 것인가.