Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

ExtJS의 Button Handler에 파라미터 전달하기

ExtJS의 Button컴포넌트에는 클릭이벤트에 대한 Function을 지정할 수 있는 Handler에 대한 Config Option이 존재합니다.


{
    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라는 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);
createDelegate()에 3번째 파라미터를 넘겨주지 않으면 원래의 함수의 파라미터를 무시하고 두번째 파라미터로 넘겨준 아규먼트배열을 차례대로 넘겨줍니다.
 
var fn = func1.createDelegate(scope, [arg1,arg2], 1)
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) {}처럼 지정을 해도 되겠군요.
2010/01/04 00:30 2010/01/04 00:30