ExtJS의 기본 이해하기 ( Component Class의 inheritance 구현 및 계층 구조의 이해 )

ExtJS의 기본 이해하기 ( Component Class의 inheritance 구현 및 계층 구조의 이해 )

view plaincopy to clipboardprint?

1. Ext.data.Connection = function(config){  
2.     Ext.apply(this, config);  
3.     this.addEvents(  
4.         "beforerequest",  
5.         "requestcomplete",  
6.         "requestexception" 
7.     );  
8.     Ext.data.Connection.superclass.constructor.call(this);  
9. };  

Ext.data.Connection = function(config){ Ext.apply(this, config); this.addEvents( "beforerequest", "requestcomplete", "requestexception" ); Ext.data.Connection.superclass.constructor.call(this); };

Ext.data.Connection 는 ExtJS의 Rmote server에 XHR Request를 위한 class이자 namespace 입니다.

ExtJS의 모든 Class는 Ext의 하위 패키지 그 안의 서브 클래스들로 구성되어 집니다.  이때 위 처럼 클래스들이 생성되어서 동작하기 위해서 기본적으로 하는 처리가 있습니다.


위의 소스를 간단하게 보겠습니다.
Ext.data.Connection 는 function 을 갖습니다. 첫번째 인자료 config 라는 Hash 형태의 오브젝트를 갖습니다.

Hash 형태의 오브젝트란? 
{ key : value }의 형태를 말하고 이해를 돕기 위해 Hash형 오브젝트라 칭합니다.
Hash형 오브젝트 타입은 value에는 다양한 type의 값이 올 수 있습니다.

이는 사용 시 new 연산자를 이용하여 인스턴스화 되게 됩니다.
즉 Ext.data.Connection은 function으로의 기능이 아닌 instance 화 되어 사용되게 됩니다.

그러면 인스턴스가 생성될 때 수행되는 컨텍스트를 봅니다.

Ext.apply(this, config); 는 아래의 Ext의 맴버로서 수행되어집니다.

view plaincopy to clipboardprint?

1. /**  
2.  * Copies all the properties of config to obj.  
3.  * @param {Object} obj The receiver of the properties  
4.  * @param {Object} config The source of the properties  
5.  * @param {Object} defaults A different object that will also be applied for default values  
6.  * @return {Object} returns obj  
7.  * @member Ext apply  
8.  */ 
9. Ext.apply = function(o, c, defaults){  
10.     if(defaults){  
11.         // no "this" reference for friendly out of scope calls  
12.         Ext.apply(o, defaults);  
13.     }  
14.     if(o && c && typeof c == 'object'){  
15.         for(var p in c){  
16.             o[p] = c[p];  
17.         }  
18.     }  
19.     return o;  
20. };  

/** * Copies all the properties of config to obj. * @param {Object} obj The receiver of the properties * @param {Object} config The source of the properties * @param {Object} defaults A different object that will also be applied for default values * @return {Object} returns obj * @member Ext apply */ Ext.apply = function(o, c, defaults){ if(defaults){ // no "this" reference for friendly out of scope calls Ext.apply(o, defaults); } if(o && c && typeof c == 'object'){ for(var p in c){ o[p] = c[p]; } } return o; };

위의 apply에 의해서 this에 config로 넘겨준 값이 모두 overwrite 되게 됩니다. this가 가지고 있던 속성 및 메서드까지 모두 config가 가지고 있던 값으로 치환되어집니다.

이때 apply 에 첫번째 인자로 주는 config 는 ExtJS에서는 해당 클래스가 갖는 속성의 의미와도 같습니다.

좀더 쉽게 풀이해서 쓴다면 ExtJS의 하나의 클래스가 인스턴스화 되어질 때 기본적으로 갖게 되는 속성 그리고 상속구조가 형성되면서 override 되는 속성과 메서드들의 기본 설정을 합니다.

좀더 쉬운 예를 들어보면 하나의 widget이 생성되어 브라우저에 띄울 때 그 widget의 기본 사이즈, 드래그 앤 드랍 등을 할 수 있는 설정을 이 config에 Hash 오브젝트로 넘겨주는 초기 설정값과도 같습니다.

view plaincopy to clipboardprint?

1. this.addEvents(  
2.         "beforerequest",  
3.         "requestcomplete",  
4.         "requestexception" 
5.     );  

this.addEvents( "beforerequest", "requestcomplete", "requestexception" );

이 코드는 이벤트 리스너를 설정하게 됩니다.  최근에 릴리즈한 자바스크립트 프레임웍에는 Custom Event가 모두 지원하고 있습니다. 

ExtJS에서도 이를 지원하는데요. 이는 Observable class에 있습니다. 
위의 코드는 이 Ext.data.Connection 이 인스턴스화 될 때 사용하게 될 기본적인 이벤트 리스너에 해당하는 것들입니다.

위에 잠깐 예시를 들었던 widget 에서는 기본적으로 widget을 움직일 수 있고 최소화 시킬 수 있는 기능을 기본적으로 갖게 됩니다.  경우에 따라서는 숨길 수 있는 기능이나 최대화 기능도 부여할 수 있습니다.  이처럼 this.addEvent를 통해서 Ext.data.Connection 이 갖는 기본적인 이벤트 리스너를 등록하게 됩니다.

XMLHttpRequest 를 통해서 서버측 데이터를 받아올 때 혹은 받을때 받고나서 등등 다양한 상황에 맞는 이벤트 리스너를 사용하기에 앞서 Connection 클래스가 기본적으로 갖게되는 이벤트 리스너를 설정해 주게 됩니다.  위의 경우 ‘beforerequest’, ‘requestcomplete’, ‘requestexception’ 3가지의 리스너를 설정하게 됩니다.

이렇게 설정된 리스너는 fireEvent 메서드 즉 핸들러를 수행하게 됩니다.

마지막 구문

Ext.data.Connection.superclass.constructor.call(this);

상당히 길게 나열된 구조입니다. ExtJS의 가장 중요한 부분이라고 해도 과언이 아닙니다. 어떻게 해서 저렇게 긴 메서드가 생성되었을까요 간단하게 풀이해서 보도록 합니다.
Ext.data.Connection 이것은 굳이 Ext.data.Connection 이라고 하지 않고 this라고 해도 무방했을텐데 왜 그랬는지 살짝 궁금해집니다.

this를 쓰지 않았던(?) 못했던(?) 이유... 2008.05.18 추가

more..

ExtJS에서 지원하는 extend 즉 Component 상속 구현에서는 Component를 초기화하는 initComponent 메소드들이 존재합니다. 즉 extend가 되면서 상위 Component의 초기화 메소드를 호출 하므로써 각 Component들의 초기 설정을 하게 됩니다.

Ext.Panel 을 사용하기 위해서는 Ext.Panel.initComponent -> Ext.Container.initComponent -> Ext.BoxComponent.initComponent 를 수행합니다.  하지만 initComponent는 Ext.extend에 의해서 Overwrite가 되어버립니다.

그래서 this.initComponent를 수행하면 안되고 Static 메서드를 호출합니다.
즉 이와 같습니다.

Ext.Panel(자기 자신).superclass(상위 객체 레퍼런스).initComponent.call(this)을 하게 됩니다.
                                    Static Method

그리고 좀더 구체적으로 설명하자면 Ext.Window의 경우에도 Component Class 부터 Panel 까지 상속받아서 사용됩니다.  이때 new Ext.Window(config) 를 하게 되면 initComponent를 호출하면서 config를 참조해서 Ext Window Component의 기본적인 설정을 하게 됩니다.

하지만 Window는 상속받았다 할지라도 상위 Component 즉 Panel Component의 유일한 속성이나 Window에서는 사용할 수 없는 것 혹은 Panel Component가 WIndow에 상속되어지면서 변경되어야 할 속성들의 값을 설정하게 됩니다.

Window 초기화 -> Panel 초기화 -> Container 초기화 -> BoxComponet 초기화 -> Component 초기화 순으로 초기화가 이루어집니다.

그 다음에 오는 superclass 는 단연 계층 구조에 있어서 최상위 클래스, 부모 클래스를 나타낼 텐데요.  superclass.constructor 입니다.  즉 superclass 가 아닌 superclass의 constructor를 나타냅니다.  이는 인스턴스화 되지 않는 부모 클래스의 생성자를 참조하고 있습니다.

그런데 과연 superclass 라는 것은 원래 있는 것인지? 아니면 ExtJS에서 기본적으로 제공하는 것인지 의문이 듭니다. 이는 Ext.extend 맴버에 의해서 Ext.data.Connection 에 부여됩니다.

Ext.extend(Ext.data.Connection, Ext.util.Observable, { … });

잠시 extend 메서드에 대한 설명을 간단하게 하고 넘어갑니다.
extend 메서드는 YUI의 구조와 동일합니다. 첫번째 인자로 넘어간 오브젝트에 superclass 속성을 부여하여 두번째 인자의 prototype을 superclass 가 레퍼런스하도록 합니다.

즉 Ext.data.Connection.superclass는 Ext.util.Observable.prototype을 레퍼런스하게 됩니다. 곧 Ext.util.Observable 의 constructor를 call 메서드를 통하여 호출하게 됩니다. 메서드를 Ext.data.Connection Scope에서 수행하게 됩니다.

이는 생성되면서 addEvent 를 통해서 생성된 이벤트 리스너의 동작을 켭니다. 이 말은 addEvent를 통해서 추가된 리스너들은 단지 ExtJS의 이벤트 class에 이벤트 이름만 등록하고 실제로 Ext.data.Connection 이 인스턴스화 될 때 비로소 리스너가 작동이 가능하게 됩니다.

언제나 그렇듯 말로만 보면 쉽게 이런 구조가 이해되지 않아서 간략하게 나마 그림으로 표현해 봅니다.

어차피 그림 조차도 설명이네요. ^^;