상속

ExtJS는 클래스를 정의하고 상속을 한다.

OOP(Object Oriented Programming) 프로그램의 상속과 유사하다.

 

* 상속 방법

Ext.define('새로운클래스',{
	extend:'상속받을 클래스'
});

 

* 상속 예제(생성한 앱에서 해당 파일 더블클릭하여 실행)

Ext.onReady(function(){
	Ext.define('TestConstructor',{
      config:{
          id:null
      },
      constructor:function(config){
          this.initConfig(config);
      },
      classFunction1:function(){
          document.write(this.getId()+'classFunction1<br>');
      },
      classFunction2:function(){
          document.write(this.getId()+'classFunction2<br>');
      }
	});
    
    Ext.define('TestInheritance',{
    	extend:'TestConstructor'
    });
    
    var id1 = Ext.create('TestInheritance',{
    	id:'id1'
    });
    
    id1.classFunction1();
    id1.classFunction2();
}

 

이처럼 ExtJS는 대부분 클래스를 상속받아 사용하는 구조임.

한가지 예로 패널을 들 수 있음.

 

예제

- renderTo : 원하는 위치에 출력하는 속성

Ext.create를 사용하여 미리 정의된 클래스를 생성하는 경우, 화면에 출력이 자동으로 되지 않으므로

renderTo라는 config 로 원하는 Tag 위치에 출력한다.

현재는 document의 body에 출력한다.

Ext.onReady(function(){
	Ext.define('TestPanel',{
    	extend:'Ext.panel.Panel',
        title:'Hello ExtJS',
        html:'Hello ExtJS HTML',
        renderTo:document.body
    });
    
    Ext.create('TestPanel',{
    });
});