본문 바로가기
Ext JS

02 클래스

by haheehee 2023. 8. 31.

디버깅

  • console.log(’…’)
  • MVVM 아키텍처 사용 시, F12-Network 탭에서 requires한 파일이 정상적으로 로딩되었는지 확인

클래스 정의

  • 객체 정의 → Ext.define(’클래스명’, {…});
    • 클래스는 일반속성과 config 속성을 가질 수 있음
    • config 속성 : 설정과 같은 속성. 클래스 생성시 속성으로 인정
      • config:{ name:null }과 같이 config 속성으로 name을 부여할 수 있음
      • config에 속성을 설정할 경우 → 해당 속성은 자동으로 get, set 접두어를 붙여 메소드로 사용 가능 → this.getName(), this.setName(’설정값’)
    • 생성자 함수는 처음 클래스가 생성될 때 자동으로 constructor라는 생성자가 추가됨
      • constructor 생성자 안에 config 속성을 반영 : this.initConfig(config)를 호출
      constructor: function(config){
	this.initConfig(config)
}
      • 생성자함수로 클래스 생성시 정의한 속성들도 자동으로 처리됨
  • 정의된 클래스 생성 → Ext.create(’정의된클래서’, {…});
    • Ext.create로 Ext.define으로 정의된 객체 생성
    → cmd창 : sencha generate app -ext BasicApp ./BasicApp
  • Ext.onReady(function() { Ext.define('Motor', { config:{ name:null }, 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', { name:'Bus' }); bus.run(); bus.speed(); var taxi = Ext.create('Motor', { name:'Taxi' }); taxi.run(); taxi.speed(); })

상속

  • 일반적인 OOP프로그램과 유사
  • extend 사용하여 상속
Ext.define('새로운클래스', {
	extened:'상속받을클래스',
});

Ext.onReady(function() {
    Ext.define('MyPanel', {
        extend:'Ext.Panel',
        title:'Hello ExtJs',
        html:'<h2>Welcome ExtJS!',
        width:400,
        height:300,
        renderTo:document.body
    });
    Ext.create('MyPanel', {

    });
})

Config

  • 별도의 get/set 메소드 구현이 필요 없음 → 자동으로 처리됨
  • 생성자를 이용해 config 속성 초기화하는데 사용
apply속성명(새로운값, 이전값){
		return 반환값; // 반환값에 따라 변경될 값이 설정됨
}

정적변수

  • statics
...
statics:{
	count:0
},
...
addCount:function() {
	this.statics().count++;
},
getCount:function() {
	return this.statics().count;
}
...

싱글톤(Singleton)

  • 클래스 전체를 인스턴스로 사용
  • singleton:true로 설정하여 사용

이벤트 구현

  • 객체.on("이벤트명", 함수);형태
Ext.onReady(function() {
    Ext.define('BasicApp.view.main.Main', {
        extend: 'Ext.container.Container',
    });

    Ext.define('userButton', {
        extend:'Ext.Button',
        config:{
            width:200,
            height:200,
            text:'to center',
        },
        listeners:{
            click:function(){
                this.fireEvent("gotothe",{param1:'param1'});
            }
        }
    });
    var panel = Ext.create("Ext.Panel", {
        height:700,
        width:800,
        html:'Hello Ext Js',
        renderTo:document.body
    });
    var myButton = Ext.create('userButton', {
        extends:'userButton',
        text:'가운데로 이동'
    });
    myButton.on('gotothe', function(){
        console.log('gotothe arguments', arguments);
        myButton.setPosition(400-this.width/2, 350-this.height/2);
    });
    panel.add(myButton);
})

파일 분리

  • 외부에서 사용 : Ext.requires('클래스명');
  • 내부에서 사용 : requires:['클래스명']
  • 클래스 정의시 경로를 생각하여 클래스명도 점(.)을 이용하여 정의한다.
    • Ext.define('motor.Motor', {...});

컴포넌트

  • Ext.Panel은 다른 위젯을 포함할 수 있으므로 컴포넌트이자 컨테이너
  • 컴포넌트를 xtype으로 정의하고 items에 추가
    • console.log(’…’)
    • MVVM 아키텍처 사용 시, F12-Network 탭에서 requires한 파일이 정상적으로 로딩되었는지 확인
    클래스 정의
    • 객체 정의 → Ext.define(’클래스명’, {…});
      • 클래스는 일반속성과 config 속성을 가질 수 있음
      • config 속성 : 설정과 같은 속성. 클래스 생성시 속성으로 인정
        • config:{ name:null }과 같이 config 속성으로 name을 부여할 수 있음
        • config에 속성을 설정할 경우 → 해당 속성은 자동으로 get, set 접두어를 붙여 메소드로 사용 가능 → this.getName(), this.setName(’설정값’)
      • 생성자 함수는 처음 클래스가 생성될 때 자동으로 constructor라는 생성자가 추가됨
        • constructor 생성자 안에 config 속성을 반영 : this.initConfig(config)를 호출
        constructor: function(config){
	this.initConfig(config)
}
        • 생성자함수로 클래스 생성시 정의한 속성들도 자동으로 처리됨
    • 정의된 클래스 생성 → Ext.create(’정의된클래서’, {…});
      • Ext.create로 Ext.define으로 정의된 객체 생성
      → cmd창 : sencha generate app -ext BasicApp ./BasicApp
    • Ext.onReady(function() { Ext.define('Motor', { config:{ name:null }, 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', { name:'Bus' }); bus.run(); bus.speed(); var taxi = Ext.create('Motor', { name:'Taxi' }); taxi.run(); taxi.speed(); })
    상속
    • 일반적인 OOP프로그램과 유사
    • extend 사용하여 상속
    Ext.define('새로운클래스', {
	extened:'상속받을클래스',
});

    Ext.onReady(function() {
    Ext.define('MyPanel', {
        extend:'Ext.Panel',
        title:'Hello ExtJs',
        html:'<h2>Welcome ExtJS!',
        width:400,
        height:300,
        renderTo:document.body
    });
    Ext.create('MyPanel', {

    });
})
    Config
    • 별도의 get/set 메소드 구현이 필요 없음 → 자동으로 처리됨
    • 생성자를 이용해 config 속성 초기화하는데 사용
    apply속성명(새로운값, 이전값){
		return 반환값; // 반환값에 따라 변경될 값이 설정됨
}
    정적변수
    • statics
    ...
statics:{
	count:0
},
...
addCount:function() {
	this.statics().count++;
},
getCount:function() {
	return this.statics().count;
}
...
    싱글톤(Singleton)
    • 클래스 전체를 인스턴스로 사용
    • singleton:true로 설정하여 사용
    이벤트 구현
    • 객체.on("이벤트명", 함수);형태
    Ext.onReady(function() {
    Ext.define('BasicApp.view.main.Main', {
        extend: 'Ext.container.Container',
    });

    Ext.define('userButton', {
        extend:'Ext.Button',
        config:{
            width:200,
            height:200,
            text:'to center',
        },
        listeners:{
            click:function(){
                this.fireEvent("gotothe",{param1:'param1'});
            }
        }
    });
    var panel = Ext.create("Ext.Panel", {
        height:700,
        width:800,
        html:'Hello Ext Js',
        renderTo:document.body
    });
    var myButton = Ext.create('userButton', {
        extends:'userButton',
        text:'가운데로 이동'
    });
    myButton.on('gotothe', function(){
        console.log('gotothe arguments', arguments);
        myButton.setPosition(400-this.width/2, 350-this.height/2);
    });
    panel.add(myButton);
})
    파일 분리
    • 외부에서 사용 : Ext.requires('클래스명');
    • 내부에서 사용 : requires:['클래스명']
    • 클래스 정의시 경로를 생각하여 클래스명도 점(.)을 이용하여 정의한다.
      • Ext.define('motor.Motor', {...});
    컴포넌트
    • Ext.Panel은 다른 위젯을 포함할 수 있으므로 컴포넌트이자 컨테이너
    •  
    •  
    • 컴포넌트를 xtype으로 정의하고 items에 추가
      • console.log(’…’)
      • MVVM 아키텍처 사용 시, F12-Network 탭에서 requires한 파일이 정상적으로 로딩되었는지 확인
      클래스 정의
      • 객체 정의 → Ext.define(’클래스명’, {…});
        • 클래스는 일반속성과 config 속성을 가질 수 있음
        • config 속성 : 설정과 같은 속성. 클래스 생성시 속성으로 인정
          • config:{ name:null }과 같이 config 속성으로 name을 부여할 수 있음
          • config에 속성을 설정할 경우 → 해당 속성은 자동으로 get, set 접두어를 붙여 메소드로 사용 가능 → this.getName(), this.setName(’설정값’)
        • 생성자 함수는 처음 클래스가 생성될 때 자동으로 constructor라는 생성자가 추가됨
          • constructor 생성자 안에 config 속성을 반영 : this.initConfig(config)를 호출
          constructor: function(config){
	this.initConfig(config)
}
          • 생성자함수로 클래스 생성시 정의한 속성들도 자동으로 처리됨
      • 정의된 클래스 생성 → Ext.create(’정의된클래서’, {…});
        • Ext.create로 Ext.define으로 정의된 객체 생성
        → cmd창 : sencha generate app -ext BasicApp ./BasicApp
      • Ext.onReady(function() { Ext.define('Motor', { config:{ name:null }, 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', { name:'Bus' }); bus.run(); bus.speed(); var taxi = Ext.create('Motor', { name:'Taxi' }); taxi.run(); taxi.speed(); })
      상속
      • 일반적인 OOP프로그램과 유사
      • extend 사용하여 상속
      Ext.define('새로운클래스', {
	extened:'상속받을클래스',
});

      Ext.onReady(function() {
    Ext.define('MyPanel', {
        extend:'Ext.Panel',
        title:'Hello ExtJs',
        html:'<h2>Welcome ExtJS!',
        width:400,
        height:300,
        renderTo:document.body
    });
    Ext.create('MyPanel', {

    });
})
      Config
      • 별도의 get/set 메소드 구현이 필요 없음 → 자동으로 처리됨
      • 생성자를 이용해 config 속성 초기화하는데 사용
      apply속성명(새로운값, 이전값){
		return 반환값; // 반환값에 따라 변경될 값이 설정됨
}
      정적변수
      • statics
      ...
statics:{
	count:0
},
...
addCount:function() {
	this.statics().count++;
},
getCount:function() {
	return this.statics().count;
}
...
      싱글톤(Singleton)
      • 클래스 전체를 인스턴스로 사용
      • singleton:true로 설정하여 사용
      이벤트 구현
      • 객체.on("이벤트명", 함수);형태
      Ext.onReady(function() {
    Ext.define('BasicApp.view.main.Main', {
        extend: 'Ext.container.Container',
    });

    Ext.define('userButton', {
        extend:'Ext.Button',
        config:{
            width:200,
            height:200,
            text:'to center',
        },
        listeners:{
            click:function(){
                this.fireEvent("gotothe",{param1:'param1'});
            }
        }
    });
    var panel = Ext.create("Ext.Panel", {
        height:700,
        width:800,
        html:'Hello Ext Js',
        renderTo:document.body
    });
    var myButton = Ext.create('userButton', {
        extends:'userButton',
        text:'가운데로 이동'
    });
    myButton.on('gotothe', function(){
        console.log('gotothe arguments', arguments);
        myButton.setPosition(400-this.width/2, 350-this.height/2);
    });
    panel.add(myButton);
})
      파일 분리
      • 외부에서 사용 : Ext.requires('클래스명');
      • 내부에서 사용 : requires:['클래스명']
      • 클래스 정의시 경로를 생각하여 클래스명도 점(.)을 이용하여 정의한다.
        • Ext.define('motor.Motor', {...});
      컴포넌트
      • Ext.Panel은 다른 위젯을 포함할 수 있으므로 컴포넌트이자 컨테이너
      • 컴포넌트를 xtype으로 정의하고 items에 추가

저작자표시 비영리 변경금지

'Ext JS' 카테고리의 다른 글

04 레이아웃  (0) 2023.08.31
03 Ext JS 동작의 기본  (0) 2023.08.31
Ext JS 시작해보기  (0) 2023.08.30
용어 정리/ 기본 개념  (0) 2023.08.30
Ext Js 홈페이지 공부  (0) 2023.08.30

관련글

댓글

티스토리툴바