From Sencha - Learn

이 내용은 jsakalos씨가 포럼에 답변을 단 내용을 번역하였습니다.

저는 지금 제가 쓰는 거대한 어플리케이션을 위한 확장/예제/데스크탑으로부터 Ext.App(init 프로세스를 가볍게 수정해서)를 성공적으로 사용하였습다. 나는 다음의 룰을 사용했습니다.

Contents 1 가능하면 최대한 Lazy instantiation(xtype)을 사용. 2 이미 구성된 클래스(pre-configured classes) 사용하기 3 parent 레벨에 구현 관계 4 각각의 클래스는 각각의 개별 파일에 개발하고, 제품화를 위해 합치고 최소화.

가능하면 최대한 Lazy instantiation(xtype)을 사용.

여기에서 포인트는 만약 여러분이 xtypes를 사용한다면 실제 Ext 오브젝트들은 그것들이 실제로 필요해지기 전까지 생성조차 하지 않습니다.

우리는 이미 lazy 렌더링(필요할 때만 렌더링)을 사용하고 있습니다. 그러나 Ext 2에서는 다음 스텝을 만들었습니다 : xtype이라는 것은 만약 여러분이 이 오브젝트가 필요하다면 이 것을 생성하는 방법이 될 것입니다..

이미 구성된 클래스(pre-configured classes) 사용하기

첫번째에서 설명한 xtype의 접근법은 오직 구성 옵션이 있는 Ext 클래스의 확장인 “pre-configured class” 를 갖는 경우에 추가된 기능과 함께 적용되어 가능해집니다.

예를 들어 나는 성별 선택 콤보박스를 위해 다음 코드를 사용한다.

// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
  * Ext.ux.GenderCombo Extension Class for Ext 2.x Library
  *
  * @author  Ing. Jozef Sakalos
  * @version $Id: Ext.ux.GenderCombo.js 703 2008-02-10 22:19:03Z jozo $
  *
  * @class Ext.ux.GenderCombo
  * @extends Ext.ux.IconCombo
  */
Ext.ux.GenderCombo = Ext.extend(Ext.ux.IconCombo, {
    // 기본설정 부분
     genderFemaleCls:'ux-icon-gender-female'
    ,genderFemaleText:'Female'
    ,genderMaleCls:'ux-icon-gender-male'
    ,genderMaleText:'Male'
    ,genderUnknownCls:'ux-icon-gender-no'
    ,genderUnknownText:'---'
    ,valueField:'genderValue'
    ,displayField:'genderText'
    ,iconClsField:'genderCls'
    ,mode:'local'
    ,triggerAction:'all'
    ,editable:false
    ,forceSelection:true
 
    ,initComponent:function() {
 
        Ext.apply(this, {
            store: new Ext.data.SimpleStore({
                 id:0
                ,fields:[{name:'genderValue', type:'int'}, 'genderText', 'genderCls']
                ,data:[
                     [2, this.genderUnknownText, this.genderUnknownCls]
                    ,[0, this.genderMaleText, this.genderMaleCls]
                    ,[1, this.genderFemaleText, this.genderFemaleCls]
                ]
            })
        });
 
        // 부모 initComponent 메소드 호출
        Ext.ux.GenderCombo.superclass.initComponent.call(this);
 
    } // initComponent의 끝
 
    // {{{
    ,renderGender:function() {
        return function(val) {
            var retval;
            var gp = Ext.ux.GenderCombo.prototype;
            switch(val) {
                case 0: // male
                    retval = '<div class="ux-cell-gender ux-icon-gender-male">' + gp.genderMaleText + '</div>';
                break;
 
                case 1: // female
                    retval = '<div class="ux-cell-gender ux-icon-gender-female">' + gp.genderFemaleText + '</div>';
                break;
 
                default: // all others, usually 2
                    retval = '<div class="ux-cell-gender ux-icon-gender-no">' + gp.genderUnknownText + '</div>';
                break;
            }
            return retval;
        };
 
    } // eo function renderGender
    // }}}
    // {{{
    ,editorGender:function() {
        return new Ext.grid.GridEditor(new Ext.ux.GenderCombo());
    } // eo function editorGender
    // }}}
 
});
 
//xtype  등록
Ext.reg('gendercombo', Ext.ux.GenderCombo);
 
// eof

Pre-configured 클래스를 위해 일반적인 확장 패턴은 아래처럼 사용한다.

MyScope = Ext.extend(Ext.form.ComboBox, {
    // 설정 정보들
    // 외부로부터 어떤 것이라도 이곳에 설정 될 수 있다.
     border:false
 
    ,initComponent:function() {
        Ext.apply(this, {
            // 여기에 어떤것이라도 추가가 가능하다. e.g 아이템들, 툴들, 버튼들의 배열
            //외부로부터 변경될 수 없다.
        }); // e/o apply
 
        // call parent
        MyScope.superclass.initComponent.apply(this, arguments);
 
        // parent 코드 후에 event handler를 등록
 
    } // e/o function initComponent
 
    ,onRender:function() {
 
        // parent 코드 수행 전
 
        // call parent
        MyScope.superclass.onRender.apply(this, arguments);
 
        // parent 코드 후 e.g 렌더링된 컴포넌트들에 이벤트 핸들러 등록
 
    } // e/o function onRender
 
    // 다른 추가 혹은 오버라이드 메소드
 
}); // e/o extend
 
//xtype 등록
Ext.reg('mycomponentxtype', MyScope);

parent 레벨에 구현 관계

서쪽에 그리드와 중앙에 폼이 있는 border layout을 상상해보세요. 그리드의 열을 선택하고 폼에 값을 출력해보자. 저 로직은 어디다 추가해야 하나요? 그리드? 폼? 둘다 아닙니다. 그리드는 폼의 존재를 모릅니다. 그리고 폼은 그리드의 존재를 모릅니다. 둘 모두를 알고 있는 컴포넌트는 그들의 부모입니다.(뷰포트 혹은 윈도우)

그러므로 관계는 부모 레벨에서 성립되어야만 합니다. 예를 들어 window. 그리드 이벤트, 선택 변경에 따른 폼 데이터 로드 그리고 폼 전송 이벤트 코드는 그리드 레코드를 업데이트 한다.

만약 이 코드를 그리드에 넣는다면 그리드는 w/o 폼이 존재할 수 없고 만약 폼에 넣는다면 폼에w/o 그리드는 존재할 수 없습니다.

각각의 클래스는 각각의 개별 파일에 개발하고, 제품화를 위해 합치고 최소화.

네! 이것은 Ext 접근법입니다. 모든 파일을 갖고 있으니 개발 페이지의 헤더부분에 필요한 파일을 추가하고 개발을 하고 개발이 완료되면 하나의 파일로 합치고 최소화된 파일로 교체하세요. 그러면 완전한 제품 버전을 갖게 됩니다.

마지막 충고 : 어플리케이션 구조, 레이아웃, 다양한 컨트롤러, 로더, 인터페이스, 그 이상의 많은 것들에 관해 너무 깊게 생각하지 마세요.

좋은 재사용 pre-configured 클래스를 대신 쓰고 그것들을 첫 번째 위치에 어떻게 해서든지 넣으세요.

만약 그것들이 실제로 좋고 재사용이 용이하다면 당신의 어플리케이션 레이아웃을 변경할 수 있고, 다른 접근법을 사용해도 여러분의 클래스들은 여전히 동작할 것입니다.

레고처럼 – 만약 여러분이 블록을 가지고 있다면 여러분은 몇 분 안에 성을 쌓을 수 있을 것입니다.

This page was last modified on 16 December 2008, at 00:56. This page has been accessed 4,383 times.