Benney Blog

Ext.onReady(function() {
	/***
	 * Date : 2013.05.22
	 * Desc : scope에 대한 예제이다.
	 * 		  동일 변수가 지역일 경우 전역일 경우, 또는 동일 함수가 지역일 경우 
	 * 		  전역일 경우 이 scope에 따라 호출되는 변수, 함수가 달라지겠다.
	 */
	// 썩 좋은 예제같지는 않다.
	// 범위 체인은 자바 스크립트 변수를 확인하는 방법입니다. 당신은 그 안에 지역 변수로 선언되지 않은 함수 내에서 변수에 액세스하려고하는 경우, 자바 스크립트 엔진 (즉, 범위), 함수의 체인을 다시 통과합니다
	//그 이름과 일치하는 변수를 찾고. 그것은 한 다음이 사용됩니다 발견하면, 그렇지 않으면 오류가 발생합니다. 또한이 지역 변수가 같은 이름의 전역 변수보다 우선적으로 적용된다는 것을 의미합니다.
	var myGlobalVar = 'Hello from Global Scope!';

	function myFunction() {
		var myGlobalVar = 'Hello from MyFunction!';
		console.log(this);
		alert(myGlobalVar);
	}

	//	alert(myGlobalVar);
	//	myFunction();
	//	alert(myGlobalVar);

	function MyClass() {
		console.log(this);

		this.myProperty = 'Hello';
	}

	var myClass = new MyClass();

	//	alert(myClass.myProperty);
	//	alert(this.myProperty);

	// create 'cat' object
	var cat = {
		sound : 'miaow',
		speak : function() {
			alert(this.sound);
		}
	};

	// create 'dog' object
	var dog = {
		sound : 'woof',
		speak : function() {
			alert(this.sound);
		}
	};

	// call 'speak' method on each
	//	cat.speak(); // alerts 'miaow'
	//	dog.speak(); // alerts 'woof'

	// Ext.bind를 사용하여 dog.speak함수의 scope를 cat클래스로 변경하여 
	// cat클래스의 speak함수가 실행되도록 하였다.
	//	Ext.bind(dog.speak, cat)(); // alerts 'miaow'

	// 아래 소스는 정상적인 버튼을 생성하고 클랙했을 경우 scope에 해당하는
	// text를 실행하도록 하였다 . 여기서 scope는 버튼 자체이므로 'My Test Button' 이겠다.
	var button = Ext.create('Ext.button.Button', {
		text : 'My Test Button',
		listeners : {
			click : function(button, e, options) {
				alert(this.text); // alerts 'My Test Button'
			}
		},
		renderTo : Ext.getBody()
	});
	//	button.show();

	// create our sample scope object
	var exampleObject = {
		text : 'My Test Object'
	};

	// 버튼을 생성하며 클릭 이벤트에 대한 구현체를 Ext.bind로 scope를 위의 exampleObject로 변경하였다.
	var button = Ext.create('Ext.button.Button', {
		text : 'My Test Button',
		listeners : {
			click : Ext.bind(function(button, e, options) {
				alert(this.text); // alerts 'My Test Object'
			}, exampleObject)
		},
		renderTo : Ext.getBody()
	});
	button.show();
	// 위의 2	번째 버튼과 동일하게 실행된다.
	var button = Ext.create('Ext.button.Button', {
		text : 'My Test Button',
		listeners : {
			click : function(button, e, options) {
				alert(this.text); // alerts 'My Test Object'
			},
			scope : exampleObject
		},
		renderTo : Ext.getBody()
	});
	button.show();
});

// 출처 : Ext JS4 Web Application Development Cookbook

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

안녕하세요 ExtJS 2번째 오프라인 강좌로 "ExtJS MVC 따라잡기"를 준비 했습니다.

ExtJS의 장점인 MVC 패턴을 통한 구현 방법을 알아보고 

TA, 개발PL 입장에서의 모듈화가 가능한 개발 구조가 어떤 것인지 알아봅니다.

[강사소개]

• ExtJS적용 다수 시스템 구축 경험
• 한국센챠유저그룹 활동
• 삼성SDS ExtJS 강의 수행
• 온오프믹스 ExtJS 강의 진행
• Blog : http://benney.tistory.com

[ExtJS MVC 따라잡기]

• 대상 : ExtJS에 관심있는 분, 막연히 MVC모델을 따라하는 분, TA입장에서 프로젝트 모듈화 및 구조를 고민하고 계신 분
• 일시 : 5월 4일(토) 18:00 ~ 20:00
• 장소 : 강남토즈타워점 (강남점, 강남2호점 아닙니다.!!)
• URL : http://www.toz.co.kr/branch/main/index.htm?id=24
• 주소 : 서울시 강남구 강남대로 84길 24-4
• Map : http://durl.me/3p4m43
• 등록비용 : 50,000원 (아래신청주소를 클릭하시고 온오프믹스에서 등록해주세요)
• 신청주소 : http://onoffmix.com/event/14549
• 강의방식 : 완벽히 실행가능한 소스를 통해 MVC구조를 설명 (실습X)
• 강의내용
• ExtJS MVC의 소개
• MVC란 무엇인가?
• MVC를 통해 무엇을 얻을 수 있나?
• 각 요소에 대한 샘플을 보고 역할을 알 수 있다.
• Controller는 만능인가? 알고 쓰자 Controller
•  TA, PL입장에서 ExtJS MVC 구조
• 대단위 프로젝트에서 어떤 형태로 모듈화를 해야하는가?
• 개별 개발자간의 혼선을 줄이면서 개발할 수 있는 구성은 어떤 것인가?
• 최종 배포는 어떤 모습이여야 하는가? Case별 장단점
• 모듈별 개발은 어떤 모습으로 합쳐져 배포되어야 하는가?

기타 문의는 benneykwag@gmail.com으로 해주세요

아래 공유한 글은 Sencha forum에서 가져온 내용이다.

레이아웃과 리팩토링에 대한 내용으로 정말 공감하고 좋은 내용이다.

출처 : http://www.sencha.com/forum/showthread.php?239725-Screencasts-Layouts-amp-Refactoring-into-Components

I've noticed that the Sencha examples for grids, forms, trees and other components are great for people to adapt to their own needs. Where those new to Ext JS often struggle is with laying out and structuring their applications correctly. 

To support some internal training, I've put together a couple of screencasts. I've tried to keep them simple and fast paced. Hopefully some people in the community find them useful too.

The first screencast covers the basics of components, containers and layouts.

 

The second describes how to refactor large blocks of code into loosely coupled components.

 

Make sure you turn up the resolution to 720p and make them fullscreen. Enjoy!

ExtJs 포럼을 훌터 보던 중 재미나고 필요한 기능을 제공하는 사이트를 발견했다.

이 사이트는 json String 을 트리형태로 보여주고 비교까지 가능한 기능을 제공한다.

브라우저에서 실행되는 터라 너무 많은 양의 데이터는 버거워 보이지만 실무에서

json 을 직접 눈으로 확인해야하는 경우가 있고 이런 경우 이사이트에 json을 

입력하고 눈으로 확인하면 한결 편하겠다는 생각이 든다.

어제 우리 파트원이 내게 하는말이 IE8에서 ExtJS가 미쳐간다고 한다. 다 괜찮은데 IE8을 대부분 사용하는 고객사에서

컴플레인이 계속 들어오고 있다고 한다. 

문제는 TextArea에 계속 문자열을 입력하다 보면 IE8에서만 아래 동영상처럼 혼자 미친듯이 제어를 못하는

모습이 연출되는 것이다.

원인파악에 들어가서 2시간 만에 찾아낸 원인은 바로 <!DOCTYPE html> 이것이였다. app.js를 호출하는 html에

<!DOCTYPE html> 이것이 들어가 있어서 였다. 설마 했지만 이 코드를 제거하자 언제 그랬냐는 듯 정상 작동을 하였다.

DOCTYPE 즉 DTD (Document Type Definition)을 정확히 명시하지 않아서 이다. DTD가 명확하지 않을 경우

브라우저는 임의로 DTD를 해석하게 되고 의도치 않은 동작을 하게 되는 것 같다.

이런 경우에는 DTD를 정확히 명시하거나 그러기 힘들 경우 아예 삭제하는 것이 좋겠다.

브라우저는 html의 DOCTYPE으로 이 문서가 어떤 형식의 문서인지 구별하게 된다. IE에 경우 유난히 심하다고 할 수 있다.

동일한 소스도 DOCTYPE을 어떻게 명시하느냐에 따라 보여지는 모습이 전혀 다를 수 있다는 것을 인지해야한다.

뭐든 정확히 알고 쓰는게 좋다며 살짝 혼을 내긴 했지만 나 또한 이부분이 문제를 일으키리라고는 

생각지 못했으니 좋은 경험 했다고 생각해야 겠다.

ExtJS강의교안(배포판).pdf

어제 ExtJS오프라인 강의를 잘 마쳤습니다.

오신분들 감사드리고 다음에 또 뵙겠습니다.