ExtJS 객체지향 시스템

ExtJS 객체 시스템

클래스 시스템

우리가 클래스하면 가장 익숙한 단어는 '상속'이다. ExtJS에서는 상속을 간단히 사용할 수 있게 제공한다.

Ext.define('HeadlessGrid', {
    extend: 'Ext.grid.Panel',
    hideHeaders: true,
});

위의 클래스는 기본 grid 패널을 상속받아 만든 제목이 없는 grid 패널이다.

네임 스페이스

'라이브러리'를 제작하는 방법도 간단하다. 바로 '네임스페이스'를 이용하면 가능하다.

위의 예제 코드를 응용해보자.

Ext.define('Ext.Juice.HeadlessGrid', {
    extend: 'Ext.grid.Panel',
    hideHeaders: true,
});

위의 코드는 이제 Ext.Juice 네임스페이스에 포함된다.

클래스 로더를 사용해서 해당 라이브러리를 간단히 가져올 수 있다.

Ext.Loader.setPath('Ext.Juice', '../../libs/Juice');

이제 /libs/Juice 폴더 내에 있는 어느 클래스든 재사용이 가능해진다.

플러그인

플러그인은 객체지향에서 말하는 합성의 개념이라고 생각하면 된다. 객체지향 관점에서보면 상속 보다 합성을 추천한다.

Ext.define("Ext.plugin.HeadLess", {
    extend   : "Ext.AbstractPlugin",
    alias    : "plugin.headless",
 
    init : function( panel ) { 
        panel.hideHeaders = true;
    },
});

위의 플러그인을 grid 패널 추가만 해주면 제목이 없는 grid가 된다.

plugins: [plugin.headless]

믹스인

믹스인 개념은 다중 상속과 비슷하다. 클래스끼리 섞는 개념이다. 밑의 예제는 'CanSing' 클래스와 'Musician' 클래스를 섞음으로써 음악가는 노래를 할 수 있는 개념을 만들엇다.

Ext.define('CanSing', {
     sing: function() {
         alert("I'm on the highway to hell...")
     }
});
 
Ext.define('Musician', {
     mixins: ['CanSing']
});

처음에 플러그인 개념과 믹스인 개념이 이해하기 어려웠는데 이렇게 보니 이해가 잘 되었다.

자바스크립트도 객체지향적으로 만들자!

제발