지난 포스팅은 MVC중에서 M을제외한 VC를 알아보았습니다.
이번에는 View/Controller 에 추가로 Model+Store에 관하여 포스팅을 해보겠습니다.
2014/11/26 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View+Controller 연동)
이번 샘플은 콤보박스를 예를 들어 진행하겠습니다.
이전 구조에서 위의 빨간네모친 폴더 및 파일을 생성해주도록 합니다.
Ext.define('mvc_study.view.combo.CustomCombo', { extend: 'Ext.form.field.ComboBox', alias : 'widget.customCombo', fieldLabel: '선택', store: 'ComboboxStore', queryMode: 'local', displayField: 'title', valueField: 'value', initComponent: function() { this.callParent(); } });
이전 커스텀 버튼컴포넌트 생성처럼 콤보박스 컴포넌트에서 지원하는 속성들을 사용하였고
store의 속성은 Ext.create를 이용하여 사용이 가능하지만 ComboStore라고 정의해주었습니다.
다음 순서로는 데이터스토어 코드를 작성해보도록 하겠습니다.
Ext.define('mvc_study.store.ComboboxStore', { extend: 'Ext.data.Store', model: 'mvc_study.model.ComboboxModel', data : [{ title : '타이틀1', value : '값1' },{ title : '타이틀2', value : '값2' },{ title : '타이틀3', value : '값3' },{ title : '타이틀4', value : '값4' }], proxy: { type: 'memory' } });
이전 Ext.create했던 형식과 동일한 구조로 데이터스토어를 define 해주었습니다.
다른점이 있다면 fields 속성대신 model 속성을 정의해주었습니다.
솔직히 model은 별도로 정의해주지 않아도 되긴 하지만
ExtJS 공식사이트에서도 위처럼 샘플링을 들어주니
model 속성을 이용해보도록 하겠습니다.
Ext.define('mvc_study.model.ComboboxModel', { extend: 'Ext.data.Model', fields: ['title','value'] });
데이터스토어의 들어가는 fields 속성이 모델클래스에 정의되었습니다.
사용유무에 대해서는 스스로 결정하시면 되겠습니다.
기존에 존재하는 xtype : 'customButton' -> xtype : 'customCombo' 으로 변경을 해줍니다.
컨트롤러부분은 추가 및 변경사항이 많으므로 하단 코드를 덮어 씌운 다음 설명을 하도록 하겠습니다.
Ext.define('mvc_study.controller.MvcController', { extend: 'Ext.app.Controller', views: ['combo.CustomCombo'], stores: ['ComboboxStore'], refs: [ { ref: 'customCombo', selector: 'customCombo' } ], init: function() { this.control({ 'customCombo': { select: this.showComboData } }); }, showComboData : function(combo, records, eOpts){ alert("선택콤보값:"+combo.getRawValue()+","+combo.getValue()); } });
상단코드에서 추가/변경된 부분에 대해서는 다음과 같습니다.
공통적으로 삭제된 부분은 customButton 에 대한 정의부분을 삭제후 customCombo로 변경
views : customButton 삭제 -> customCombo 추가
stores속성추가 : 추가된 데이터스토어를 사용하기 위함
refs : customButton 삭제 -> customCombo추가(select 이벤트리스너 정의)
showComboData 함수정의 : 출력된 콤보목록에서 특정 값선택시 alert출력해주는 기능정의
showAlert함수 삭제 : 버튼클릭시 동작되는 함수여서 삭제
실행결과를 확인해보도록 하겠습니다.
위처럼 정상적으로 컴포넌트 화면 및 기능들이
정상적으로 동작되는 것을 확인하였습니다.
다음장은 MVC구조를 이용하여
간단하게 그리드 CRUD 기능을 구현해보도록 하겠습니다.
by 개발로짜
ExtJS 강좌 - ExtJS5 MVC 구조를 이용한 간단 그리드 CRUD 알아보기(1) (13) | 2014.12.29 |
---|---|
Spring @ResposeBody를 이용하여 JSON Response 할때 IE에서 다운로드현상 해결법 (4) | 2014.12.07 |
ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View+Controller 연동) (2) | 2014.11.26 |
ExtJS 강좌 - Sencha CMD로 ExtJS 구조 생성하여 연동테스트 해보기 (1) | 2014.11.24 |
ExtJS 강좌 - ExtJS5의 polar 타입 차트그래프 간단하게 알아보기 (0) | 2014.11.18 |
지난 포스팅에는 Sencha CMD를 이용하여 구조를 잡아보았으나
ExtJS5에서는 자동으로 MVVM 구조를 잡아버려서
이번에는 수작업으로 MVC 구조를 잡는 포스팅을 해보도록 하겠습니다.
2014/11/24 - [웹개발강좌/ExtJS] - ExtJS 강좌 - Sencha CMD로 ExtJS 구조 생성하여 연동테스트 해보기
이전 포스팅을 별도의 프로젝트로 생성 후 작업하셨다면
초기에 기본 컴포넌트 관련에 연동해놨던 프로젝트로 진행해주세요 ㅠㅠ
덮어쓰기를 하신 분들이시면
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
다시 초기설정으로 원복해주시고 진행해주시면 되겠습니다 .
위와같이 mvc 폴더구조 및 JS 파일들을 생성해주도록 합니다.
mvc.js 파일내에 다음처럼 코드를 작성해주도록 합니다.
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 구조를 잡아주기 위한 일종의 연결고리라고 생각
하시면 되겠습니다.
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 : 컴포넌트 초기화(별도로 내부적으로 기능구현을 하려면 필요)
그럼 작성한 사용자지정 컴포넌트를 뷰포트 내에 작성해보도록 하겠습니다.
Ext.define('mvc_study.view.Viewport', { extend: 'Ext.container.Viewport', items : [{ xtype : 'customButton' }], initComponent: function() { this.callParent(); } });
xtype 부분에 사용자정의 컴포넌트 생성시
작성된 alias 명칭으로 정의를 하였습니다.
최종적으로 기능핸들링과 화면출력을 위한
Controller 코드를 보도록 하겠습니다.
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 속성을 제거해주시고
하단처럼 컨트롤러를 재작성해주세요
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 구문으로 리스너 및 핸들러 이벤트를 발생시켜주고자 할때
{ ref : 컴포넌트명칭 selector : 컴포넌트명칭 }
규격으로 추가해주시면 되겠습니다.
init -> this.controller 내에 리스너추가 : 기존 Ext.create를 이용하여 listeners와 동일한 구조입니다.
(각 컴포넌트에 대한 이벤트를 정의해주기위해 필요한 함수입니다.)
showAlert 추가 : 이부분은 아시다시피 리스너 발생시 동작하는 함수부분인대 init 내에 존재하는 this.showAlert 대신 일반적인 function을 주어도 되긴하지만
그렇게되면 유지보수혹은 가독성이 떨어지므로 가능한 기능구현에 대해서는 showAlert과 같이 함수를 분리해주시는게 좋습니다.
사용자버튼컴포넌트 define 했을때의 handler의 기능과
동일한 결과를 확인하실 수 있겠습니다.
지금까지 MVC 구조중, VC(View,Controller)에 대하여 설명을 하였습니다.
다음장은 M(Model)부분을 포함하여 MVC를 모두 사용한 포스팅을 진행하도록 하겠습니다.
by 개발로짜
Spring @ResposeBody를 이용하여 JSON Response 할때 IE에서 다운로드현상 해결법 (4) | 2014.12.07 |
---|---|
ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View/Controller + Model+Store 추가) (0) | 2014.11.26 |
ExtJS 강좌 - Sencha CMD로 ExtJS 구조 생성하여 연동테스트 해보기 (1) | 2014.11.24 |
ExtJS 강좌 - ExtJS5의 polar 타입 차트그래프 간단하게 알아보기 (0) | 2014.11.18 |
ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기 (0) | 2014.11.18 |
Sencha CMD를 사용하지 않아도 구조를 잡아서 진행을 할 수 있으나,
그냥 Sencha CMD라는 툴을 사용하여 ExtJS의 구조를 잡아보도록 하겠습니다.
SenchaCMD 설치전 ExtJS5 GPL 버전 다운로드부분은 하단 포스팅을 참고해주세요
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
※ Sencha CMD는 최소 JDK 1.6 (+) 이 설치되어 있어야 합니다.
http://www.sencha.com/products/sencha-cmd/download/
상단 url 접속 후 자신의 플랫폼에 맞는 "Download Now" 버튼을 클릭하여 SenchaCmd를 다운로드 받도록 합니다.
※ 윈도우 기준으로 포스팅하겠습니다.
압축해제 후 "SenchaCmd-x.x.x.xxx-windows.exe" 실행을 하여 Sencha CMD를 설치 합니다.
Next 클릭
약관동의 체크 후 Next 클릭
디렉토리 설정 후 Next 클릭
(기본디렉토리로 하여도 무관)
Snecha CMD 설치진행..
설치완료 Finish 클릭
설치가 정상적으로 완료되었는지 CMD 창을 띄운다음
"sencha" 라는 명령어를 쳐보도록 합니다.
위처럼 어떤 메시지들이 읽힌다면 설치는 성공한 것입니다.
이어서 ExtJS의 구조를 생성해 보도록 하겠습니다.
명령어의 구조는 다음과 같습니다.
위처럼 명령어를 주면 되겠습니다.
ExtJS부모디렉토리 경로란 ?
위 파일들이 존재하는 위치의 부모디렉토리를 뜻하는 것입니다.
한번 CMD 창에 sencha 명령어를 이용하여 구조를 생성해보도록 하겠습니다.
E:\>sencha -sdk C:\Users\xxx\Downloads\ext-5.0.1-gpl\ext-5.0.1 generate app extjs_mvc e:\extjs_mvc
위와같이 출력되었다면 설치한 e:\extjs_mvc 디렉토리를 확인해보도록 하겠습니다.
해당 파일들을 통째로 자신의 프로젝트 ROOT 경로에 위치시켜 놓은 다음 실행을 해보도록 합니다.
샘플컴포넌트가 생성되었다면 정상적으로 Sencha CMD를 이용하여 구조생성이 완료된 것입니다.
다음 포스팅부터 ExtJS 구조에 대해서 하나씩 알아보도록 하겠습니다 .
by 개발로짜
ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View/Controller + Model+Store 추가) (0) | 2014.11.26 |
---|---|
ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View+Controller 연동) (2) | 2014.11.26 |
ExtJS 강좌 - ExtJS5의 polar 타입 차트그래프 간단하게 알아보기 (0) | 2014.11.18 |
ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기 (0) | 2014.11.18 |
ExtJS 강좌 - Ajax 비동기 통신에 대하여 알아보자 (0) | 2014.11.13 |