지난 포스팅에는 Sencha CMD를 이용하여 구조를 잡아보았으나
ExtJS5에서는 자동으로 MVVM 구조를 잡아버려서
이번에는 수작업으로 MVC 구조를 잡는 포스팅을 해보도록 하겠습니다.
2014/11/24 - [웹개발강좌/ExtJS] - ExtJS 강좌 - Sencha CMD로 ExtJS 구조 생성하여 연동테스트 해보기
이전 포스팅을 별도의 프로젝트로 생성 후 작업하셨다면
초기에 기본 컴포넌트 관련에 연동해놨던 프로젝트로 진행해주세요 ㅠㅠ
덮어쓰기를 하신 분들이시면
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
다시 초기설정으로 원복해주시고 진행해주시면 되겠습니다 .
위와같이 mvc 폴더구조 및 JS 파일들을 생성해주도록 합니다.
mvc.js
mvc.js 파일내에 다음처럼 코드를 작성해주도록 합니다.
1 2 3 4 5 6 7 8 | Ext.application({
name: 'mvc_study',
appFolder : '/mvc_study',
controllers: [
'MvcController'
],
autoCreateViewport: true
});
|
name : ExtJS 어플리케이션 네이밍을 의미
appFolder : mvc구조의 root 폴더를 의미 (정의하지 않을시 app디렉토리명이 default)
controllers : 컨트롤러 클래스명을 의미
autoCreateViewport : true로 주어야 view에 대한 기능 동작
mvc.js 파일은
html <-> ExtJS MVC 구조를 잡아주기 위한 일종의 연결고리라고 생각
하시면 되겠습니다.
/mvc_study/view/button/CustomButton.js
1 2 3 4 5 6 7 8 9 10 11 | Ext.define('mvc_study.view.button.CustomButton', {
extend: 'Ext.button.Button',
alias : 'widget.customButton',
text : '내가만든버튼',
handler : function(){
alert("클릭!!");
},
initComponent: function() {
this.callParent();
}
});
|
custombutton.js 파일내에는 사용자가 작성한 컴포넌트를 코드로 작성하였습니다.
extend : '상속받고자하는 ExtJS 클래스'
alias : "xtype : 'xxx'" 처럼 주기위한 명칭 xtype 지정시 widget은 생략하고 다음에 위치하는 'customButton' 을 xtype으로 지정이가능
text / handler ... : 버튼컴포넌트에서 지원하는 속성
initComponent : 컴포넌트 초기화(별도로 내부적으로 기능구현을 하려면 필요)
그럼 작성한 사용자지정 컴포넌트를 뷰포트 내에 작성해보도록 하겠습니다.
/mvc_study/view/Viewport.js
1 2 3 4 5 6 7 8 9 | Ext.define('mvc_study.view.Viewport', {
extend: 'Ext.container.Viewport',
items : [{
xtype : 'customButton'
}],
initComponent: function() {
this.callParent();
}
});
|
xtype 부분에 사용자정의 컴포넌트 생성시
작성된 alias 명칭으로 정의를 하였습니다.
최종적으로 기능핸들링과 화면출력을 위한
Controller 코드를 보도록 하겠습니다.
/mvc_study/controller/MvcController.js
1 2 3 4 5 6 7 | Ext.define('mvc_study.controller.MvcController', {
extend: 'Ext.app.Controller',
views: ['button.CustomButton'],
init: function() {
this.control();
}
});
|
view에서 정의한것과 마찬가지로 구조는 거의 동일합니다.
추가로 필요한 속성이 있다면 views 관련 속성인대
이부분은 view 디렉토리내에 존재하는 컴포넌트들을 의미하는 겁니다.
CustomButton 클래스의 define 부분을 보시면
'mvc_study.view.button.CustomButton' 코드가 존재하는데
바로 view 다음에 존재하는 'button.CustomButton'을 기입하면 되겠습니다.
실행을 한번 해보도록 하겠습니다.
위와같이 정상적으로 버튼 출력후 클릭했을경우
view에서 정의해준 handler 속성으로 alert이 출력되었습니다.
컴포넌트 속성에 리스너 혹은 핸들러 속성을 이용하여 기능 구현이 가능하지만
그대로 사용하게되면 MVC 를 이용하는 의미가 없으므로
한번 해당 코드를 컨트롤러로 옮기는 작업을
진행해보도록 하겠습니다.
즉, handler 혹은 리스너 -> click 이벤트 발생시 alert이 출력되는 부분을
controller에 정의하여 동작시켜보도록 하겠습니다.
우선 CustomButton.js의 handler 속성을 제거해주시고
하단처럼 컨트롤러를 재작성해주세요
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | Ext.define('mvc_study.controller.MvcController', {
extend: 'Ext.app.Controller',
views: ['button.CustomButton'],
refs: [
{
ref: 'customButton',
selector: 'customButton'
}
],
init: function() {
this.control({
'customButton': {
click: this.showAlert
}
});
},
showAlert : function(){
alert("출력");
}
});
|
기존 코드에서 추가 및 변경되 부분이 있다면
refs 속성추가 : views에서 정의해준 컴포넌트를 정의해주어야 합니다. json array 구문으로 리스너 및 핸들러 이벤트를 발생시켜주고자 할때
1 2 3 4 | {
ref : 컴포넌트명칭
selector : 컴포넌트명칭
}
|
규격으로 추가해주시면 되겠습니다.
init -> this.controller 내에 리스너추가 : 기존 Ext.create를 이용하여 listeners와 동일한 구조입니다.
(각 컴포넌트에 대한 이벤트를 정의해주기위해 필요한 함수입니다.)
showAlert 추가 : 이부분은 아시다시피 리스너 발생시 동작하는 함수부분인대 init 내에 존재하는 this.showAlert 대신 일반적인 function을 주어도 되긴하지만
그렇게되면 유지보수혹은 가독성이 떨어지므로 가능한 기능구현에 대해서는 showAlert과 같이 함수를 분리해주시는게 좋습니다.
사용자버튼컴포넌트 define 했을때의 handler의 기능과
동일한 결과를 확인하실 수 있겠습니다.
지금까지 MVC 구조중, VC(View,Controller)에 대하여 설명을 하였습니다.
다음장은 M(Model)부분을 포함하여 MVC를 모두 사용한 포스팅을 진행하도록 하겠습니다.
by 개발로짜
