Ext.onReady(function() {
/***
* config에 대한 설명이다.
* config에 표기된 변수는 자동으로 set, get, apply메소드가 생성되고
* 필요에 따라 override를 하여 사용한다.
*/
// Define new class 'Vehicle' under the 'Cookbook' namespace
Ext.define('Cookbook.Vehicle', {
// define our config object
config : {
Manufacturer : 'Aston Martin',
Model : 'Vanquish'
},
constructor : function(config) {
/***
* 초기화 한다. 필요할때..
*/
this.initConfig(config);
return this;
},
// show details of Vehicle
getDetails : function() {
console.log('I am an ' + this.getManufacturer() + ' ' + this.getModel());
},
// update DOM elements with current Values
applyManufacturer : function(manufacturer) {
console.log('Called applyManufacturer:', manufacturer)
// 아래와 같이 사용할 경우 무한루프가 발생한다.
// 이는 setter메소드는 apply메소드를 수반하기때문에
// setter메소드를 쓰면 안되고 config에 직접 세팅해야한다.
// this.setManufacturer(manufacturer);
this.Manufacturer = ':[ ' + manufacturer + ']';
},
getManufacturer : function(){
console.log('Called getManufacturer', this.Manufacturer)
return this.Manufacturer;
},
setManufacturer : function(manufacturer) {
console.log('Called setManufacturer', manufacturer)
this.manufacturer = this.applyManufacturer(manufacturer) || manufacturer;
},
applyModel : function(model) {
console.log('Called model:', model)
Ext.get('model').update(model);
return model;
}
},
function() {
console.log('Cookbook.Vehicle class defined!');
});
// create a new instance of Vehicle class
var vehicle = Ext.create('Cookbook.Vehicle');
console.log(vehicle.getManufacturer());
vehicle.setManufacturer('Volkswagen');
vehicle.setModel('Golf');
console.log(vehicle.getManufacturer());
vehicle.getDetails();
});
// 출처 : Ext JS4 Web Application Development Cookbook
