From Learn About the Ext JavaScript Library

Contents 1 소개 2 Ext.Component 3 미리 구성된(Pre-configured) 클래스들 4 Ext.Component 확장하기 5 재사용 템플릿 6 마치면서

소개

태초에 Ext.extend() 가 있고 그것은 좋은 것 이다. Ext.extend() 는 자바스크립트로 강력한 객체 지향 클래스 계층들을 만들게 합니다. 여러분은 여러분의 Base클래스와 파생된 클래스들을 만들기 위해 이것을 사용하고 또한 Ext에 만들어진 클래스들을 더 확장하기 위해서도 사용한다. 만일 여러분이 Ext.extend()를 정확하기 이해고 있지 않으면 Manual:Intro:Inheritance를 먼저 읽어주기 바랍니다.

Zozef Saklos의 Tutorial:Extending_Ext_Class 에서는 Ext 1.x 에서 상속을 사용하기 위한 기술적 방법을 꾀 자세히 단계적으로 제시하고 있습니다. 자신의 생성자 정의 방법은 Ext 2.x에서 여전히 작업 중이고 여러분들은 틀림없이 이 방법을 사용하는 pre-2.x코드를 경험하게 될 것입니다.

Ext.Component

대부분의 Ext 위젯(Form Elements, Panels, Toolbars )들은 Ext.Component를 상속 받습니다.(그리고 아직 그렇지 않은 것들은 Ext 3에서 하게 될 것입니다.)

미리 구성된(Pre-configured) 클래스들

여러분들이 Ext.Component(혹은 Ext.Component 상속받는 어떠한 클래스라도)를 확장할 수 있는 가장 심플한 방법은 Ext 1.x에서 이미 했던 Ext.extend() (위의 Jozef의 튜터리얼에 의하면)를 사용하는 것이다. 다른 관점에서 여러분은 생성자를 정의 하지 않아도 됩니다. (이것은 이 글 다음에 올 initComponent() 함수에 의해 제어되어 집니다.) 만약 여러분이 원하는 할 일의 몇 가지를 재사용 클래스로 기본값을 정의한다면 모든 처리를 여러분이 해줘야 합니다. (Pre-configured 클래스 라는 것으로 이 글과 ExtJS 커뮤니티에 다른 곳에서 참고되졌다.):

//Ext.some.component의 pre-configured 버전인 MyComponent를 생성.
MyComponent = Ext.extend(Ext.some.component, {
    myDefault1: '..',
    myDefault2: '..'
});
 
// Lazy 초기화를 사용하기 위해 xtype를 등록 
Ext.reg('mycomponentxtype', MyComponent);

위의 예제 안에 Ext.some.component 오브젝트 리터럴은 이미 포함하고 있는 config 옵션들을 Ext.extend()가 수행되면서 덮어 씌어진 두 번째 아규먼트를 기본값으로 포함할 것입니다. 위의 예제는 단순하여 헷갈리지만 재 사용할 수 있는 오브젝트들로 여러분의 어플리케이션에서 반복적인 코드의 큰 덩어리를 재 조합하도록 지원합니다.

예를 들면, 여러분은 여러분이 이미 설정한 config 옵션을 갖는 Ext.some.component의 인스턴스를 생성할 수 있고

var myComponent = new MyComponent();

혹은 Component XType을 등록을 통해서도 할 수 있다. 예를 들어 판넬의 items 속성에 항목을 이용하여 할 수 있습니다.

{..
   items: [ {xtype: 'mycomponentxtype'} ]
..}

Ext.Component 확장하기

네, 그래서 Pre-configured 클래스들은 유용합니다, 그러나 지금까지 우리들은 추가할 만한 여분의 기능들도 우리들이 상속하고 있는 클래스들에 추가하지 않고 있었습니다. Extending을 하기 위해 우리는 상속된 몇몇 메서드를 오버라이드 할 필요가 있었습니다. 이것이야 말로 Ext 2.x가 정말로 빛나게 하는 시작점이기도 합니다.

1.x에 있었던 Ext.Component는 2.x에서는 한층 더 확장되고, 진보되어졌고 전체적인 구조에서 가장 기본적인 클래스 안에서 유일하게 만들어 졌습니다. Component는 현재 컴포넌트를 생성, 렌더링, 이벤트 핸들링, 상태관리 그리고 소멸을 위한 단일화 모델을 제공합니다. 그리고 이 기능을 요구하는 모든 Ext에 있는 컴포넌트는 Component를 확장한다Ext_2_Overview#Component_Model.

이 문서는 Ext_2_Overview보다 미흡한 부분이 있기 때문에 이 링크를 통해 학습하셔야 합니다. 만일 여러분들이 Ext.Component 소스 코드를 열면 extending을 발견할 것입니다. (그것은 ExtJS 소스 폴더의 서브 폴더인 widgets 폴더에 Components.js 파일이다. 만약 잘 모르겠으면 Ext Source Overview 를 참조하라) 그 코드는 the Component Life Cycle, Ext_2_Overview#Rendering 그리고 Ext_2_Overview#Destruction. 의 상응하는 단계적인 설명과 함께 계속 이어진 내용 일 수 있다. 여러분이 어떻게 Ext가 두건 아래에서 동작하는 방법을 친밀하게 이해하고 시작하기 위한다면 Component는 정말로 괄목할 만한 자료입니다.

지금, 이 글은 Ext.Component의 확장에 관한 것이기 때문에 여러분이 여기에서 원하는 초점은 the Component Life Cycle. 주된 로직을 갖는 initComponent()일 것입니다. 여러분들은 iniComponent()를 마스터한 후에 Ext_2_Overview#Rendering, 를 확장하는 onRender()와 Ext_2_Overview#Destruction 등등 컴포넌트를 위한 onDestory() 같은 다른 중요한 메소드로 이동할 수 있다. 이 시점에서 어딘가에서도 씌여졌던 것을 다시 쓰기 보다는 Ext 커뮤니티 멤버들에 의해서 씌여졌던 훌륭한 자료들에서 중요한 점을 제시할 것입니다.

Jozef Sakalos의 튜토리얼 : Tutorial:Writing_a_Big_Application_in_Ext 는 새로운 컴포넌트 상성 모델을 사용하는 것의 훌륭한 단계적 튜토리얼을 보여준다. 그리고 어떤 사소한 어플리케이션이라도 이것은 의심할 여지 없이 좋은 것이다.

Jozef Saklos의 또 다른 튜토리얼 : Tutorial:Extending_Ext2_Class 또한 실 세계의 훌륭한 구현 예시를 (mjlecomte의 포럼에서 비슷한 코드의 더 많은 것을 포럼 포스팅 으로 제공하고 있다.

재사용 템플릿

이하 소스는 Ext.Component 클래스들을 확장할 때 여러분들이 시작 포인트인 템플리트(mjlecomte의 forum에 Jozef Sakalos에 의해 게시되어진 템플리트를 기초로 함)와도 같다.

MyComponent = Ext.extend(Ext.some.component, {
    // 생성자 Defaults는 사용자 config 오브젝트에 의해 오버라이드 될 수 있다.
    propA: 1,
 
    initComponent: function(){
        // 컴포넌트 초기화 동안 호출되어진다.
 
        // Config오브젝트는 이미 ‘this’에 적용되어져서 프로퍼티들은 여기에 오버라이드 
         //될 수 있거나 새로운 프로퍼티들이 추가될 수 있다.(e.g. items, tolls, buttons)
        Ext.apply(this, {
            propA: 3
        });
 
        // parent 코드 전
 
        // parent 호출(요구됨)
        MyComponent.superclass.initComponent.apply(this, arguments);
 
        // parent 코드 후
        // 렌더링된 컴포넌트에 이벤트 핸들러 설정
    },
 
    // 상속된 다른 메소드가 오버라이드 된다 
    onRender: function(){
 
        // parent 코드 전
 
        // parent 호출(요구됨)
        MyScope.superclass.onRender.apply(this, arguments);
 
        // parent 코드 후
 
    }
});
 
//게으른 초기화(lazy initialization) 를 허용하도록 하기 위해 xtype을 등록
Ext.reg('mycomponentxtype', MyComponent);

예제에서 보시다시피 만일 여러분이 둘 중에 어느 쪽을 이용하여 위의 클래스를 사용하면 :

var myComponent = new MyComponent({
    propA: 2
});
// Or lazily:
{..
  items: {xtype: 'mycomponentxtype', propA: 2}
..}

프로퍼티 propA는 값 1,2,3 각각 세 번에 걸쳐 설정되었을 것입니다.

만일 여러분들이 코드를(그리고 설명들)를 수행한다면 값이 처음에는 1(생성자 default에 의해) 이였고 사용자 Config 오브젝트에 의해서 2로 설정되고 마지막으로 initComponent에 의해서 3으로 조정된다.

이 예제는 코드가 실행되는（순서대로 처음부터 끝까지 읽어보세요.）순서에 대한 이해를 돕습니다.

컴포넌트들은 다른 컴포넌트들을 감싸기 때문에 최상의 컴포넌트를 뽑아내는 가장 빠른 방법은 바로 아래의 예제입니다.

var topCmp = (function(o){while(o.ownerCt){o=o.ownerCt} return o;})(this);

마치면서

이 기사는 the Component Life Cycle. 의 주된 initComponent() 메서드와 그 흐름 초점을 맞추고 있습니다. 여러분이 위에서 언급한 것들의 다루는 방법을 알았다면 Ext_2_Overview#Component_Model 리스트 되어 있는 Ext Component 모델（rendering，state, management，plugin，etc 관리되는）의 다른 측면을 분석, 조사하면 좋겠다.

이 주제에 대해서 훌륭한 튜토리얼과 포럼의 글을 기재한 Jozef Sakalos에게 큰 감사를 한다. 그리고 그들 덕분에 굉장한 프레임웍을 만들 수 있게 되었다.

Ext 3에서 나타날 것들을 빨리 보고 싶어 미칠 지경이다!