[ExtJS강좌 22] MVC 기반으로 컴포넌트 동작시키기 (1)

벌써 ExtJS 관련 강좌가 22번째네요 후아후아~

빠르다 빨라~

그동안에는 컴포넌트 관련해서만 화면에 출력하고 간단한 버튼 클릭이벤트나 listeners에 이벤트 

추가하여 동작이 되는 것을 확인해 보았었다.

본인이 생각하는 MVC의 장점은 기존 한페이지에 기능과 컴포넌트설정을 모두 적용하면 코드라인이 길어진다 

쉽게 말해 각 페이지별로 위에 내용처럼 기능들을 구분하여 분기를 하면 보기에도 편하고 출력속도도 분명히 빨라진다고 생각한다

첫번째로 MVC 구조를 잡도록 하자!! 

본인은 MVC 초반에 이해를 잘 못했는데 점점 써보니 이게 편하고 익숙해지는듯 싶다.

HTML 페이지 기반으로 오로지 html 페이지는 하나일뿐이고 그외의 나머지 리소스는 오로지 js 

파일뿐이다!!

뭐 스타일을 별도로 적용을 한다면 별도의 css도 필요하겠지만 본인은 항상 기본에만 충실하기 

때문!! 

css는 신경 안쓸랜다~~ 

설정이 안되신 분들은  하단페이지 링크를 참고하여 연동을 하도록 하자

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

그다음 폴더 구조를 잡도록 하자.

본인은 다음과 같이 구조를 잡았다.

진행하는 프로젝트 구조에 맞춰서 변경하도록 하자 해당 구조가 필수는 아니다!!

index.html에 기본적인 ExtJS 연동 파일 include 한거에 추가로 mvc.js 파일을 include 하도록 하자

<script type="text/javascript" src="/mvc.js"></script>

include 하였다면 mvc.js파일내에 코드를 다음과 같이 짜도록 하자

● mvc.js

Ext.application({
	//프로젝트에 사용할 어플리케이션 명칭
    name: 'mvc',
    //설정안해면 default "/app" 폴더를 인식한다.
    //알맞게 변경하도록 하자
    appFolder : '/mvc',
    //컨트롤러 등록
    controllers: [
       'MVCController'
    ],
    //view auto load
    //될수있으면 false는 주지 말자...
	autoCreateViewport: true
});

위와같이 지정해 주었다면 추가로 view 폴더에 Viewport.js 라는 파일을 만들어주고 

다음과같이 잡도록 하자

MVC에서 viewport.js가 핵심이다!

html의 body와 같다고 해야하나???? ㅋㅋ  

● Viewport.js

Ext.define('mvc.view.Viewport', {
	//viewport 상속
    extend: 'Ext.container.Viewport',    
    initComponent: function() {
        this.callParent();
    }
});

그리고 위에 mvc.js에 controllers에 추가해준 MVCConstorller를 만들어주자

생성위치는 controller 폴더 -> MVCConstorller.js라고 만들자

● MVCController.js

Ext.define('mvc.controller.MVCController', {
	//기본상속
    extend: 'Ext.app.Controller',
    init: function() {
		this.control();
                alert("!!");
    }
});

이걸로 1차 세팅은 끝이다. 

Viewport나 MVCController 파일을 보면 Ext.defind에 mvc.xxxxx 라고 주었는데

mvc <<< 이 명칭은 바로 mvc.js에서 정의해준 name명이다.

프로그램 이름이라고 생각하자!!  

그리고 mvc.view <<< 이것은 폴더구조를 의미하는듯 하다

마지막은 각각의 파일 명칭인대 될수있으면 파일명이랑 일치시켜주는게 편할듯 하다.

통일을 안시켜주게되면 몇가지 번거로운점이 생기기때문...;;;  

자 그럼 실행을 해보도록 하고 MVCController에서 init하였을때 alert이 화면에 뜨면 

1차 연동은 성공한것이다!

위 화면처럼 떳는가!!   

그렇다면 MVC 중 C의 CONTROLLER 연동은 끝난것이다.

다음은 V의 VIEW 연동을 해보도록 하자!! 

간단하게 화면에 버튼을 띄워볼것이다.

그전에 위의 MVCController에서 작성한 alert은 지워주고~~

view 연동을 해봅시다.

이전 컴포넌트 시간에 버튼을 생성했을때 기억나는가??

renderTo 를 html의 body로 주고

panel이나 formpanel을 주고 그놈들의 items영역에 xtype을 주어서 컴포넌트 생성을 하였었다.

mvc는 renderTo는 필요없고 똑같이 

viewport내에 items에 컴포넌트 선언을 해주는것이다 

viewport.js 파일에 extend와 같은 depth로 items를 선언하고 그 자식으로 xtype : 'button'을 주도록 하겠다.

viewport.js  추가코드

items : [
    	{
    		xtype : 'button',
    		text : '버튼클릭'
    	}
],

그럼 실행을 해볼까나?

화면에 버튼이 떴다면!! 

바로바로 다음내용 진행!! 쉴틈이 없어요~

바로 버튼 클릭 이벤트로 ExtJS의 메시지ALERT 창을 띄워 보도록 하자

기능을 구현하는 부분은 아까 위에 적었지만 컨트롤러 부분에 적용하도록 하겠음

자 controller를 보면 init 함수내에 

this.controller() <<< 이렇게 준것이 있을것이다.

이부분은 특정 타겟 + 이벤트를 정의하는 것인대 다음과 같이 추가를 할수 있겠다.

this.control({
        //이 버튼은 현재 웹페이지상의 존재하는 xtype이 button을 말하는것
	'button' : {
		//클릭이벤트 발생시 현재 컨트롤러의 messageAlert이라는 함수를 호출
		click : this.messageAlert
	}
});

click : 이거 다음에 준 messageAlert이라는 함수를 생성해주도록 하자

함수의 위치는 init과 같은 depth에 위치한다.

 //이거 호출한다.
 messageAlert : function(btn){
    	//기능은 
    	Ext.MessageBox.show({
			title : 'MVC alert',
			msg : '버튼 클릭!!(button click!!)',
			buttons : Ext.MessageBox.YES,
			icon : Ext.MessageBox.INFO
    	});
    }

실행한번 하도록 해보자

1. 화면 띄우기

2. 버튼 클릭

자 viewport -> 버튼을 클릭할때 이벤트를 controller로 하여 호출하게 해보았다.

mvc 맛보기 정도라고 해야할까?

아마 처음에는 익숙하지 않아서 이해가 잘 안될수도 있지만 mvc기반으로 게속 진행하다 보면 

mvc가 편하고 쉽다는것을 느끼게 될것이다.

다음장에서 이어서 진행하도록 하겠다

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!