Sencha Touch에서 View 이벤트를 Controller에서 관리하기

Sencha Touch의 가장 큰 장점이 MVC 프레임워크 지원이 된다는 것이다. 그런데 사실 MVC라고 말해도 일부 사람들(개발자가 아니거나, 한 클래스에 모든 기능을 다 넣어두는 개발자)에게는 MVC 지원이 뭐 그리 대수냐고 말할 수 있을지도 모른다. 우리는 흔히 HTML 코드와 Javascript를 분리해서 markup에 최대한 집중하여 웹 자체를 문서로 만들어보자 라는 생각을 하고 있다. 그래서 HTML 코드 안에 onClick 대신에 javascript에서 DOM을 selector를 이용해서 접근해서 이벤트를 등록하는 코드를 만들어 사용한다.

다음 코드를 살펴보자. button이라는 HTML 엘리먼트에 모두 onclick 이벤트를 추가하는 가장 간단한 방법이다.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>

    <script type="text/javascript">
        function onButtonClick(element) {
            console.log(element.id)
        }
    </script>
</head>

<body>  
<button id="1" class="buttons" onclick="onButtonClick(this);">button1</button>  
<button id="2" class="buttons" onclick="onButtonClick(this);">button2</button>  
<button id="3" class="buttons" onclick="onButtonClick(this);">button3</button>  
<button id="4" class="buttons" onclick="onButtonClick(this);">button4</button>  
<button id="5" class="buttons" onclick="onButtonClick(this);">button5</button>  
</body>

</html>  

하지만 위 코드는 뷰에 이벤트처리 코드가 포함이 되어 있다. 위 코드는 다음과 같이 HTML 코드와 이벤트 처리를 분리할 수 있다.