Sencha Architect Event Binding 1

EXTJS에서 오브젝트에 Event binding하는 방법은 Controller를 이용하거나 Listener를 이용하는 방법 두가지로 나눌 수 있습니다. 두가지 방법은 Sencha에서 제공하는 MVC모델 구조를 이용하냐 아니냐의 차이일 뿐 기능은 동일합니다.(당연한 이야기 이지만..)

첫 번째로 Listener를 이용한 Event binding 방법입니다.

1. Sencha Architect를 실행하고 화면상에 Button을 추가합니다.

2. 생성된 버튼 오브젝트를 선택하면 Property 항목에 "Event Bindings"라는 항목이 보입니다.

3. "Event Bindings" 항목의 "+"표시를 선택하면 아래와 같이 이벤트를 선택할 수 있는 List가 표시됩니다.

4. 이벤트 리스트에서 사용하려는 이벤트를 선택합니다. 예시로 "click" 이벤트를 선택하겠습니다.

5.이벤트를 선택하면 "Event Bindings" 항목에 선택된 이벤트가 표시되고 "Project Inspector" 항목에도 같이 표시가 됩니다.

  이벤트에 실제 코딩을 하려면 "Project Inspector"에 이벤트를 클릭하고 "Code"항목을 클릭합니다.

6. 아래와 같이 편집창이 보이면서 이벤트에서 처리할 코드를 삽입 할 수 있습니다.

7. Sencha Architect에서 저장 후 실행하여 보면 아래와 같이 버튼을 클릭하면 이벤트에서 작성한 alert이 표시되는 것을 확인할 수 있습니다.

8. 작성된 코드를 확인하여 보면 listeners 통해서 click 이벤트가 발행하면 onButtonClick 함수가 호출됩니다.

Ext.define('MyApp.view.MyButton', {
    extend: 'Ext.button.Button',

    text: 'MyButton',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            listeners: {
                click: {
                    fn: me.onButtonClick,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onButtonClick: function(button, e, options) {
        Ext.Msg.alert("이벤트", "클릭이벤트");
    }

});