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
크리에이티브 커먼즈 라이센스
Creative Commons License

Trackback URL : http://blog.outsider.ne.kr/trackback/420

Comments List

  1. 바쁘신데 언제 또 이런 포스팅까지..ㅋㅋ
    햄도 복마니 받으세용;;ㅎ

    1. 그냥 머리 좀 안돌아갈때.. ㅋㅋㅋㅋ

Leave a Reply

Facebook Comments

  • Categories

    List (923)
    BlaBlaBla~ (127)
    JAVA (165)
    Scala (55)
    .NET (21)
    PHP (1)
    Database (31)
    Programming (150)
    Publishing (41)
    Javascript (132)
    node.js (89)
    CoffeeScript (10)
    Ruby on Rails (11)
    RIA (10)
    Web 2.0 & Semantic (47)
    Ubuntu (6)
    Mobile (23)
    Cloud (4)
  • Tag Cloud

  • Calendar

    «   2013/05   »
          1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31  
  • Archives

  • My Books

    NODE.JS 프로그래밍
  • Recent Posts

  • Recent Comments

  • Recent Trackbacks

  • Recent My Delicious

  • Site Stats

    • Total hits: 2501741
    • Today: 1835
    • Yesterday: 4032
  • 4352

    3336

    0

    -30 days

    today : 1835

    Google PageRank Checker Powered by  MyPagerank.Net