{
id: 'springsee-send-btn',
xtype: 'button',
text: 'Send',
handler: getImages,
scope: this
}
위와 같이 정의합니다. 위 버튼을 클릭하면 getImages가 호출되는 것입니다. 기본적으로는 위와같이 사용하면 되지만 handler로 지정하면서 특정파라미터를 넘겨주어야 할 필요가 있었습니다.
다행히도 ExtJS는 createDelegate를 통해서 파라미터를 전달할 수 있도록 하고 있습니다. ExtJS의 Learning Center에서 createDelegate에 대해 자세하게 설명해 주고 있습니다.createDelegate는 아래의 3가지 형태로 사용할 수 있습니다.
var fn = func1.createDelegate(scope, [arg1,arg2], true)
fn(a,b,c) === scope.func1(a,b,c,arg1,arg2);
fn(a,b,c) === scope.func1(a,b,c,arg1,arg2);
fn()이 a,b,c라는 3개의 파라미터를 가지고 있을 때 createDelegate()의 3번째 파라미터로 true를 넘겨주면 기존의 a,b,c를 그대로 두고 새로추가한 2번째 파라미터배열인 arg1,arg2를 4,5번째 파라미터로 넘겨줍니다. scope는 함수콘텍스트를 지정한 것이므로 func1이 scope.func1로 실행됩니다.
var fn = func1.createDelegate(scope, [arg1,arg2])
fn(a,b,c) === scope.func1(arg1,arg2);
fn(a,b,c) === scope.func1(arg1,arg2);
createDelegate()에 3번째 파라미터를 넘겨주지 않으면 원래의 함수의 파라미터를 무시하고 두번째 파라미터로 넘겨준 아규먼트배열을 차례대로 넘겨줍니다.
var fn = func1.createDelegate(scope, [arg1,arg2], 1)
fn(a,b,c) === scope.func1(a,arg1,arg2,b,c);
fn(a,b,c) === scope.func1(a,arg1,arg2,b,c);
createDelegate()의 3번째 파라미터로 숫자를 넘겨주면 두번째 파라미터로 넘겨준 아규먼트배열을 해당위치에 넣어서 함수를 실행합니다.
위 예제를 다시 보면 Button의 핸들러는 기본적으로 function(b, e){}의 형태를 가지고 있습니다. b는 클릭된 Button객체이고 e는 이벤트객체입니다. getImages에 "test"라는 파라미터를 추가로 넘겨주고 싶다면 아래와 같이 정의하면 됩니다.
{
id: 'springsee-send-btn',
xtype: 'button',
text: 'Send',
handler: getImages.createDelegate(this, ['test'], true),
scope: this
}
// getImages 함수
function getImages(b, e, arg1) {}
Button과 Event객체를 받지 않아도 된다면 3번째 파라미터를 없애고 function getImages(arg1) {}처럼 지정을 해도 되겠군요.
바쁘신데 언제 또 이런 포스팅까지..ㅋㅋ
햄도 복마니 받으세용;;ㅎ
그냥 머리 좀 안돌아갈때.. ㅋㅋㅋㅋ