'xtype'에 해당되는 글 1건

  1. 2010.03.02 What's xtype in Ext JS?

Ext JS 에 있어서 xtype은 매우 중요한 개념을 갖는다.  몇몇 개발자들은 쉽게 흘러 지나가는 namespace 정도로 간단히 생각하고 있지만 Ext 에서 매우 중요한 개념이고 이 개념에 대해서 정확히 이해하고 넘어가야 한다.


정의

xtype
은 클래스를 나타내는 상징적인 명칭이며 그 이상도 그 이하도 아니다. 

예를 들어 Ext JS를 이용하여 새롭게 만든 클래스가 Ext.ux.MyGrid 이고 이 클래스는 인스턴스를 생성할 때 사용하는 일반적인 클래스 명이기도 하다.

이 말은 곧 다음과 같은 방법으로 Ext.ux.MyGrid 클래스에 xtype을 부여할 수 있다.

Ext.reg(‘mygrid’, Ext.ux.MyGrid);

여기서 xtype은 mygrid이고 일반적인 클래스명은 Ext.ux.MyGrid 이다.  위 예시는 새로운 xtype을 등록하는 것이다.  바꿔 말하면 xtype 인 mygrid를 Ext.ux.MyGrid와 연결하는 것이다.


장점

Ext JS로 개발되어진 복잡한 구성의 웹 애플리케이션에서 사용자의 액션에 응답하기 위해 새로운 객체들(Window, Form, Grid 등)이 생성되어 지는데 여기서 버튼이나 메뉴를 눌렀을 때 새로운 윈도우가 생성된다거나 패널 내에 그리드가 생성, 랜더링되어 화면상에 나타나는 처리가 필요할  때를 생각해보자.  

이런 것들은 Ext 2.x 이전 버전에서는 document가 로딩이 완료되는 시점에서 모든 객체들의 인스턴스가 생성되도록 처리되었었다.   달리 말해 사용자의 반응 유무에 상관없이 웹 애플리케이션을 구성하기 위한 모든 구성 요소들이 표시되지 않은 체로 document 어딘가에 렌더링 되어져 있고 이것은 즉 브라우저의 메모리에 상주한다는 의미와도 같다.

그리고 이것은 구성요소가 많지 않을 때는 큰 상관이 없지만 만약 그 숫자가 수십 수백 개에 이른다면 자원낭비이다.


지연 인스턴스(Lazy Instantiation)

만약 xtype을 가지고 있다면 메모리에는 다음과 같은 단순한 구성객체만 가지게 된다.

{ xtype : ‘mgrid’, border : false, width : 600, height : 400, … }

이것은 복잡하게 인스턴스화된 클래스처럼 브라우저의 자원을 낭비하지 않는다.
만약 구성객체로 정의된 웹 애플리케이션에서 어떤 일이 발생할까?

mygrid xtype로 등록한 구성객체가 인스턴스화가 필요한 시점에서 ComponentMgr 는 다음의 코드를 실행해서 Ext.ux.MyGrid 클래스의 객체를 생성하게 된다.

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

다음과도 같다.

return new Ext.ux.MyGrid(config);

그리드의 인스턴스화하는 것은 렌더링과 브라우저에 표시하는 것을 동반할 것이고 기억해야 할 것은 오직 필요한 경우에만 인스턴스화 된다는 것이다.  모든 표준 xtype 목록들은 API문서에 있는 Ext.Component 에서 볼 수 있습니다

이 글은 http://www.extjs.com/learn/Tutorial:Xtype_defined 을 번역한 글입니다.

더 읽기
Outsider님 블로그 - Ext JS xtype 리스트 정리 - http://blog.outsider.ne.kr/414
Same article in my blog You can comment it there.
Writing a Big Application in Ext



신고
Posted by Rhio.kim
TAG ,