config 속성

config 안의 속성은 별도의 set/get 메소드 구현이 필요치 않고 자동 처리된다.

또한 생성자를 사용하여 config 속성을 초기화하는데 사용할 수 있다.

 

이 외에 config 내 속성을 바꾸려고 할 때, 이를 체크하여 변경을 감지하여 이벤트를 걸 수 있다.

즉 'apply속성명'의 형태를 사용하여 config 속성의 변경을 감지한다.

apply속성명 (새로운값, 이전값){
	return 반환값; //반환값에 따라 변경될 값이 리턴된다. 
}

 

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'
        config:{
        	name:'ejyoo'
        },
        applyName:function(newName, oldName){
        	if(confirm('Change name to : ' + newName)==true)
            	return newName;
            else
            	return oldName;
        }
    });
    
    var id1 = Ext.create('TestInheritance',{
    	id:'id1'
    });
    
    id1.classFunction1();
    id1.setName('kdhong');
    document.write('이름 : '+id1.getName());
});

 

일반적으로 위젯을 만들 때 initConfig 대신 initComponent를 대신 사용한다.

initComponent는 확장할 클래스 구성요소를 초기화하고 원하는 대로 변경할 수 있게한다.

this.callParents(arguments); 는 확장할 클래스의 initComponent함수를 호출한다. (자바의 super 인가)

이는 재정의한 내용을 확장할 클래스에 전달해서 확장할 클래스가 작동하기 위함이다.

Ext.define('ClassTest', {
    extend : 'Ext.panel.Panel',
    title : 'callParent와 initComponent사용하기',

    initComponent : function() {
        var me = this;
        me.callParent(arguments); 
    }
});

var classTest = Ext.create('ClassTest', {
    renderTo : Ext.getBody();
});