[ExtJS] 클래스 정의

ExtJS는 방대한 라이브러리를 클래스로 만들어 관리하고 있다.  

클래스 정의 방법 : Ext.define문을 이용해 정의한다. (마치 객체지향과 같이)

- Ext.define ('클래스명', {...});

 

정의된 클래스를 생성하기 위해서는 Ext.create문을 사용한다.

- Ext.create로 Ext.define으로 정의된 객체를 생성한다.

- Ext.create ('정의된 클래스', {...});

 

이후 xtype:앨리어스명'과 같이 앨리어스(alias)명을 사용할 경우 Ext.create와 동일하게 동작한다.

 

예시

Motor라는 클래스를 정의해보자.

Ext.define('Motor', {...});

Motor클래스는 일반속성과 config 속성을 가진다.

- config 속성은 설정과 같은 속성으로 클래스 생성 시 속성으로 인식된다.

- 이름이 부여될 경우 -> config : { name : null }

* config에 속성을 설정할 경우 해당 속성은 자동으로 get, set 접두어를 붙여 메소드로 사용할 수 있다.

- this.getName(), this.setName('설정값')

 

클래스가 정의될 때 생성자를 정의할 수 있다.

생성자 함수는 처음 클래스가 생성될 때 자동으로 반영하기 위해 constructor라는 생성자를 추가한다.

constructor 생성자 안에 config속성을 반영하기 위해 this.initConfig(config)를 호출한다.

 

constructor : function (config) {

      this.initConfig(config)

}

위 코드는 클래스 생성 시 정의한 속성을 그대로 지정하여 사용할 수 있도록 처리한다. -> 클래스 생성시 정의한 속성들도 자동으로 처리된다.

클래스에 필요한 동작이나 연산등은 메소드를 정의하여 사용할 수 있다.

- run : function() {...}

 

예제 2.

Ext.onReady(function(){ //Ext.onReady() : Html 화면의 일부로 사용하는 방법.
    Ext.define('Motor', {
        config:{
            name:null
        }
    },//만약 생성자를 생성하지 않으면 실행결과에 Bus와 Taxi는 출력되지 않으며 this.setName을 별도로 호출하여 처리해야 한다.
    constructor:function(config) {
        this.initConfig(config);
    },
    run:function(){
        document.write(this.getName() + 'running<br>');
    },
    speed:function(){
        document.write(this.getName() +'normal speed <br>');
    }
});
 
var bus = Ext.create('Motor', { //정의된 클래스를 create로 가져온다.(마치 객체 생성)
    name:'Bus'
});
bus.run(); //override와 같이 함수를 사용할 수 있다.
bus.speed();
var taxi = Ext.create('Motor', {
    name:'Taxi'
});
taxi.run();
taxi.speed();
})

이 외에 extend:'상속받을 클래스'를 통해, 여러 함수를 상속받아올 수 있다.

Ext.define('Transformer', {
    extend:'Motor'
});

감사합니다.

 

출처 : 최상의 웹애플리케이션 개발을 위한 Ext JS 6 프로그래밍 저자 : 이병옥, 조만영,  / 클래스 정의 및 상속.