Extjs Sample :: 기본문서구조만들기

이 포스팅은 넥스트리에서 내부프로젝트를 진행할때 표준문서로 삼았던 자료입니다.
현재 내용이 표준이 아니므로 참조하실때 유의하시기 바랍니다.

기본 문서구조 만들기

아래 내용은 [1원팁]윈도우 로딩시 스크립트 실행에 잠시 소개했던 내용이다.

방법 1 : 클래스 상속 및 복잡한 페이지에 용이하다.

BasicInfo_Main = function(){

   return {

      init: {

          내용~

      }

   }


}();  

Ext.EventManager.onDocumentReady(BasicInfo_Main.init, BasicInfo_Main, true);



ext에서 클래스 상속은 다음과 같이 정의한다.
Ext.MyClass = function() {
    Ext.MyClass.superclass.constructor.call(this);
    .....
}; 
 
Ext.extend(Ext.validProd, Ext.util.Observable, {
    functionName:function (v) {
        ...............
        return v;
    }
});

var valid = new Ext.MyClass();

방법 2 : 간단한 페이지에 사용하기

Ext.onReady(function(){

   내용~

 } 

현재 BCF(factoryware:가칭) Project에서는 방법1을 사용하기로 한다.

 

문서 구조틀

기본문서구조

//메인 클래스에서 사용된 서브 클래스를 정의한다.

왼쪽판넬클래스 = function(){

   this.변수;


   this.public메쏘드 = functon(){

        내용~~

   };


//==== 서브클래스 옵션을 상속받은 Ext.panel 옵션을 호출한다.

   왼쪽판넬클래스.superclass.constructor.call(this, {   

      왼쪽판넬클래스의 config 옵션모음~

   });


   왼쪽판넬클래스 이벤트 걸기~


};


//서브클래스의 속성을 Ext.panel 을 상속받아 사용한다.

Ext.extend(왼쪽판넬클래스, Ext.panel, {

   왼쪽판넬 클래스의_private메쏘드_01(){

        내용~

   }

});




//기본 클래스를 정의한다. 메인 클래스

기본클래스 = function(){

  var 로컬변수1;

  var 로컬변수2;

  return{

      //기본클래스가 호출될때 실행되는 첫번째 메쏘드

      init:function(){

         this.변수,this.변수;


         로컬변수1 = new 왼쪽클래스();     //왼쪽 클래스 호출


         기본레이아웃 그리기 viewport설정;


         (function(){  페이지 로딩시 사용될 메쏘드 호출 })();

         객체.on('이벤트',페이지로딩시 이벤트걸 메쏘드호출);


         private메쏘드_01();  //메쏘드 실행


      },




      private메쏘드_01 : function(){

         내용~

      },


      private메쏘드_02 : function(){

         function 내장메쏘드(){

            내장메쏘드내용

         }

      }


  };

}();

Ext.EventManager.onDocumentReady(기본클래스.init, 기본클래스,true); 

//화면이 로딩될때 기본클래스.init 메쏘드를 먼저 호출한다.

 

 현재 BCF(factoryware)의 기본구조의 위와 같이 사용될 Class와 메인클래스를 별도의 파일로 관리하여 해당 클래스를 호출한다.
 메인클래스를 제외환 대부분의 클래스(위에서는 "왼쪽클래스")에서는 Private메쏘드를 사용하려면 확장클래스 (왼쪽클래스.superclass.constructor.call(this,{});)를 사용하여야 하며,
 확장을 위해서 Ext.extend(왼쪽클래스,Ext.Panel)을 이용하여 "왼쪽클래스" Ext.Panel을 상속받는것임을 알수 있다.