Ext JS 클래스 생성

  1   클래스 정의 및 생성

---

 자바스크립트는 클래스 기반의 언어는 아니다. 하지만 프로토타입 구조를 이용한 클래스 구조를 흉내 낼수가 있다. Ext JS는 이러한 작업을 쉽게 해주는 메소드들을 제공해준다.

Ext Js에서 클래스를 생성하기 위해서 Ext.define 메소드를 제공해주는데 이 메소드는 문자열 기반 정의를 사용하기 때문에 네임스페이스 충돌을 피해 클래스 정의를 유연하게 할수 있게 해준다.

 Ext.define 메소드는 세개의 인자를 전달 받는데 첫번째 인자로 정의될 클래스의 이름을 문자열로 받게된다. 두번째는 해당 클래스의 몸체가 되는 속성 및 메소드를 오브젝트 형태로 받는다. 마지막 세번 째는 이 클래스가 정의된 후 동작하는 콜백함수를 받게 된다. 이러한 구조를 따라 클래스를 정의하면 다음과 같은 형태로 정의가 된다.

 클래스를 정의했다면 이제 클래스를 생성하고 해당 클래스 내의 메소드 또는 속성을 호출해야한다. 정의된 클래스를 생성하기 위해서 Ext.create 메소드를 사용한다. 이 메소드를 사용하여 정의되어있는 클래스를 인스턴스화 시키고 그것을 변수에 담아 사용하는 코드이다.

 Ext.create 메소드를 사용하지 않고 일반 자바나 자바스크립트의 문법과 같이 new 연산자를 사용하여 정의된 클래스를 생성할 수도 있다. 이렇게 Ext.create나 new로 생성한 인스턴스는 동일한 기능을 가지게 된다.

  2   클래스 생성자 정의

---

 생성자는 클래스의 인스턴스화(Ext.create나 new 연산자 사용)될 때 실행되며 인스턴스화가 되기 전에 설정 또는 속성의 수정 등을 할 수 있게한다. 다음은 생성자를 사용하여 클래스를 정의하는 코드이다.

 이렇게 생성자를 사용하여 클래스를 정의할 경우 config 설정을 통해 필요한 속성들을 정의해주면 생성자에서 자동으로 setter 메소드와 getter 메소드를 생성해준다. 그렇기 때문에 따로 setter 메소드와 getter 메소드를 정의해 주지 않아도 클래스만 생성하면 가져다 쓸 수 있게된다. 하지만 클래스 내에 setter와 getter를 정의해 준다면 Ext Js는 생성자가 생성한 setter와 getter가 아닌 사용자가 정의한 메소드들을 가져다 쓰게 된다.

 다음은 setter 메소드를 사용할 때 유용하게 사용할 수 있는 apply 메소드이다. 이 메소드는 setter 메소드에 의해 호출되며 반환하는 값을 해당 속성의 값으로 저장하게 된다. 즉 setter 메소드에서 설정한 속성값을 중간에 가로채 변경 후 변경된 값을 속성에 저장하게 된다.