지난 포스팅에는 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 파일내에 다음처럼 코드를 작성해주도록 합니다.

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

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

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

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 개발로짜

 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의 구조를 생성해 보도록 하겠습니다.

명령어의 구조는 다음과 같습니다.

"sencha -sdk ExtJS부모디렉토리경로 generate app 앱명(ex:KitchenSink) 구조생성하고자하는디렉토리경로"

위처럼 명령어를 주면 되겠습니다.

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 개발로짜

지난 포스팅은  xtype이 'cartesian'인 차트그래프에 대하여 알아보았습니다.

차트 연동 및 'cartesian' 차트 관련 내용은 하단을 참고해 주세요 ^^

2014/11/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기

이번에는 xtype이 'polar'인 차트타입에 대하여 간단하게 포스팅 해보도록 하겠습니다.

polar 차트 역시 다양한 종류가 존재하나 간단하게 원형차트와 레이더 차트에 대하여 알아보도록 하겠습니다

polar 차트란?

원형인 각 축과 반경축을 사용하는차트를 의미합니다.

제일먼저 원형차트에 대한 코드를 확인해보도록 하겠습니다.

데이터 스토어는 이전 그래프 관련 포스팅을 참고해주세요.

1.원형(파이형) 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
			{
			    xtype: 'polar',
			    insetPadding: 50,
			    innerPadding: 20,
			    series: [{
			        type: 'pie',
			        angleField: 'count',
			        label: {
			            field: 'date',
			            calloutLine: {
			                length: 60,
			                width: 3
			            }
			        },
			        highlight: true,
			        tooltip: {
			            trackMouse: true,
			            renderer: function(storeItem, item) {
			                this.setHtml(storeItem.get('date') + '일: ' + storeItem.get('count') + '명');
			            }
			        }
			    }],
			    //데이터 출력
			    store: chartStore
			}    
    ]
});

polar 차트는 별도로 'series' 내의 X/Y 좌표 설정을 하지 않습니다.

대신 'series' 속성내에 'angleField' 와 'label' 속성의 'field' 속성으로 데이터스토어 데이터를 화면에 출력시킵니다.

'highlight' 속성은 마우스 오버기능시, 케이크 잘라서 나누는 효과(?) 를 나타내기 위하여 적용해보았습니다.

원형(파이형) 그래프 실행결과

원형 차트내에서는 일자별로 출력이 되며 방문수는 원형 폭에 맞추어 출력이 되었습니다.

마우스 오버시 나누어 지는 효과는 highlight 속성으로 기능구현이 되었고 툴팁효과는 tooltip 속성으로 인하여 출력이 되었습니다.

2.레이더 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
			{
		    xtype: 'polar',
		    insetPadding: '40 40 60 40',
            interactions: ['rotate'],
            axes: [{
                type: 'numeric',
                position: 'radial',
                fields: 'count',
                renderer: function (v) { return v + '명'; },
                minimum: 0,
                grid: true
            }, {
                type: 'category',
                position: 'angular',
                grid: true
            }],
            series: [{
                type: 'radar',
                xField: 'date',
                yField: 'count'
            }],
		    //데이터 출력
		    store: chartStore
		}
    ]
});

보통 'polar' 그래프타입은 X/Y축이 없지만 레이더 차트는 XY 축을 선언합니다.

또한 interactions 속성을 통해서 출력된 그래프를 회전시킬수 있습니다.

레이더 그래프 실행결과

레이더그래프는 회전하는다트판을 연상시키게 하는 그래프 종류인거 같습니다.

지금까지 ExtJS에서 지원되는 대표적인 기본 컴포넌트들에 대하여 알아보았습니다.

다음 포스팅은 MVC 구조로 ExtJS 실습을 진행하도록 하겠습니다.

by 개발로짜