자바스크립트/Ext JS
[Cookbook Study Ch01]1. Creating Custom Classes using the new Ext JS Class System
베니94
2013. 5. 22. 00:52
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