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
