Benney Blog

Ext.onReady(function() {
	/**
	 * Date : 2013.05.22
	 * Desc : Mixins를 설명한다. 이를 통해 다중 상속를 구현할 수 있다.
	 */
	Ext.define('HasCamera',{
		takePhoto : function(){
			console.log('Say Cheese! Click!')
		}
	});
	
	Ext.define('Cookbook.Smartphone',{
		mixins : {
			camera : 'HasCamera'
		},
		
		useCamera : function(){
			/***
			 * 우선 현재 클래스에 takePhoto함수가 있다면
			 * 실행하고 없다면 mixins에서 참조하고 있는 클래스를
			 * 찾아 실행한다.
			 * 현재 클래스의 takePhoto를 삭제하면 아래에서 호출되는 
			 * takePhoto는 mixins에서 참조한 클래스의 함수 일 것 이다.
			 */
			this.takePhoto();
		},
		
		takePhoto: function(){
			this.focus();
			// mixins으로 접근 시.
			this.mixins.camera.takePhoto.call(this);
		},
		
		focus: function(){
			console.log('Focusing Subject...');
		}

	});
	
	var smartphone = Ext.create('Cookbook.Smartphone');
	smartphone.useCamera();
});
// 출처 : Ext JS4 Web Application Development Cookbook

Ext.onReady(function() {
	/***
	 * 여기에서는 상속을 통해 클래스를 재활용하고 상속해준 클래스를 초기화 또는 override로 재정의한다.
	 */
	Ext.define('Cookbook.Vehicle', {

		config : {
			manufacturer : 'Unknown Manufacturer',
			model : 'Unknown Model',
			topSpeed : 0
		},

		constructor : function(manufacturer, model, topSpeed) {
			// initialise our config object
			this.initConfig(); // 초기화 
			console.log(manufacturer, model, topSpeed)
			if (manufacturer) {
				this.setManufacturer(manufacturer);
			}
			if (model) {
				this.setModel(model);
			}
			if (topSpeed) {
				this.setTopSpeed(topSpeed);
			}
		},

		travel : function(distance) {
			console.log('The ' + this.getManufacturer() + ' ' + this.getModel()
					+ ' travelled ' + distance + ' miles at '
					+ this.getTopSpeed() + 'mph');
		}

	}, function() {
		console.log('Vehicle Class defined!');
	});

	// 생성사 클래스명과 필요한 인자를 같이 제공해 줄 수 있다.
	var vehicle = Ext
			.create('Cookbook.Vehicle', 'Aston Martin', 'Vanquish', 60);

	vehicle.travel(100); // alerts �The Aston Martin Vanquish travelled 100 miles at 60mph

	// Define the Cookbook.Plane class
	Ext.define('Cookbook.Plane', {

		extend : 'Cookbook.Vehicle',

		config : {
			maxAltitude : 0
		},

		constructor : function(manufacturer, model, topSpeed, maxAltitude) {
			// initialise our config object
			this.initConfig();

			if (maxAltitude) {
				this.setMaxAltitude(maxAltitude);
			}

			/***
			 * 상속 받은 클래스를 초기화 할 경우 아래와 같이 
			 * 제공받은 인자로 초기화가 가능하다.
			 * 즉 현재 메소드가 생성자이고 생성자 내부에서 callparent했으므로
			 * 상속해준 클래스의 생성자가 호출되는 것이다.
			 */
			this.callParent([ manufacturer, model, topSpeed ]);
		},

		takeOff : function() {
			console.log('The ' + this.getManufacturer() + ' ' + this.getModel()
					+ ' is taking off.');
		},
		land : function() {
			console.log('The ' + this.getManufacturer() + ' ' + this.getModel()
					+ ' is landing.');
		},

		travel : function(distance) {
			this.takeOff();

			// execute the base class� generic travel method
			console.log('current arg : ', arguments)
			/***
			 * 하단에 주목하자 현재 실행되고 있는 함수는 travel이고 동일한 함수가 상속받은
			 * 클래스에도 존재하는데 상속된 클래스의 함수를 콜하기 위해 아래와 같이 한다.
			 */
			this.callParent(arguments);
//
			console.log('The ' + this.getManufacturer() + ' ' + this.getModel()
					+ ' flew at an altitude of ' + this.getMaxAltitude()
					+ 'feet');
//
			this.land();
		}

	}, function() {
		console.log('Plane Class Defined!');
	});
	
	
	// create an instance of Cookbook.Plane class
	var plane = Ext.create('Cookbook.Plane', 'Boeing', '747', 500, 30000);
                
	plane.travel(800); // alerts 'The Boeing 747 is taking off'
});
// 출처 : Ext JS4 Web Application Development Cookbook

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