Sencha Architect Event Binding 2

Sencha에서 제공하는 MVC 모델 구조를 활용한 이벤트 바인딩입니다.

1. Sencha Architect를 실행하여 화면상에 버튼을 한개 생성합니다.

2. Config 창 상단에 id로 검색을 합니다.(오브젝트의 속성이 너무 많기 때문에 Property 창에서 찾기가 불편합니다. 이런식으로 검색을 하면 쉽게 사용할 수 있습니다.) id값에 "btn_event"로 지정합니다.

id를 입력하는 이유는 Controller에서 id값을 기준으로 오브젝트를 찾아서 이벤트를 바인딩 할 수 있습니다.

3. Toobox의 "Controller" 항목을 Project Inspector의 Controllers에 드래그 하면 아래와 같이 Controller가 추가됩니다.

4. 추가된 Controller를 선택하고 Property항목 중 Actions의 "+" 표시를 클릭 한 다음 "Controller Action"을 선택합니다.

5. 첫 번째로 target type을 지정합니다. 리스트 박스에서 처음에 추가하였던 "MyButton"을 선택합니다.

   두 번째로 이벤트를 지정합니다. "Click"을 선택합니다.

6. Controller에 이벤트가 추가된 모습입니다. 추가된 이벤트를 선택하고 코드 창에서 이벤트 발생시 처리될 코드를 입력하면됩니다.

Ex) Ext.Msg.alert("이벤트", "클릭이벤트")

7. 저장을 하고 실행을 하여 보면 이벤트가 실행되는 것을 확인할 수 있습니다.

실제 작성된 소스를 확인하여 보면은 버튼 오브젝트에서 지정된 ID를 기준으로 Controller에서 Click이벤트가 실행됩니다.

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

    id: 'btn_event',
    text: 'MyButton',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
    }

});

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

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

    init: function(application) {
        this.control({
            "#btn_event": {
                click: this.onBtn_eventClick
            }
        });
    }

});