이번에는 ExtJS5에서 제공되는 차트컴포넌트를 구현해보도록 하겠습니다.

예전 ExtJS강좌의 첫번째 포스팅부분에서 extjs gpl 버전 다운받으신다음 

해당 압축해제 파일들을 삭제하지 말아달라고 요청드렸었죠?

2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편

이제는 차트 구현을 하기위해서는 

이미 빌드되어있는 폴더 하나를 프로젝트 경로에 추가하도록 하겠습니다.

"/extjs-5.0.x/build/packages/" 디렉토리를 보시면 

다음과 같은 2가지 종류의 차트관련 폴더를 확인 하실 수 있으실 겁니다.

2종류의 차트의 차이점을 확인한 결과 

ExtJS5이전버전인 ExtJS4.x 버전에 사용가능한 차트를 "ext-charts" 디렉토리에 빌드해놓았고 

ExtJS5부터 신규로 빌들된 차트는 "sencha-charts" 디렉토리내에 빌드를 해놓았습니다.

확인결과 차트호출관련 xtype 만 별도로 차이를 두었을뿐 크게 차이가 나지는 않는것같습니다.

저희는 ExtJS5로 꾸준히 진행을 해왔으므로 

"sencha-charts"디렉토리를 기존 ExtJS 테마들을 넣어놓은 디렉토리내에 INCLUDE 하도록 하겠습니다.

그럼 차트관련 JS파일을 기존 ExtJS JS/CSS 파일 INCLUDE되어있는 

HTML/JSP/PHP 파일내에 INCLUDE 하도록 합니다.

<script type="text/javascript" src="/extjs/sencha-charts/build/sencha-charts.js"></script>

지원하는 차트 종류는 어마어마하게 많지만 자주 사용되는 일부차트컴포넌트만 

일부 샘플로 제작하여 맛보기삼아서 만들어보도록 하겠습니다.

ExtJS의 차트컴포넌트 종류는 'cartesian' 타입과 'polar' 타입으로 나누어 볼 수 있겠는데 

이번 포스팅은 'cartesian' 종류의 컴포넌트를 다루어 보도록 하겠습니다.

cartesian 차트란?

X/Y 좌표 두방향을 갖는 직교좌표입니다.

flipXY 속성으로 그래프 방향변경이 가능합니다.

샘플화면은 티스토리에서 기본적으로 제공하는 방문자수 그래프 데이터를 기준으로 예를 들어볼까 합니다 

전체 샘플코드에서 동일한 데이터 스토어는 변수에 담아서 사용할 예정이므로 

다음처럼 Ext.onReady 내에 정의해주세요

var chartStore = Ext.create('Ext.data.Store',{
			    	fields : ['date','count'],
			    	data : [
			    	        {date : '10',count : 305 },
			    	        {date : '11',count : 335 },
			    	        {date : '12',count : 329 },
			    	        {date : '13',count : 360 },
			    	        {date : '14',count : 298 },
			    	        {date : '15',count : 77 },
			    	        {date : '16',count : 99}, 
			    	        {date : '17',count : 130 }
			    	       ]
			    })

차트컴포넌트 관련코드 또한 Ext.onReady안에 정의해주세요

1.세로형 막대그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
            {
			    xtype: 'cartesian',
			    //위치
			    axes: [{
			        type: 'numeric',
			        position: 'left',
			        minimum: 0
			    }, {
			        type: 'category',
			        position: 'bottom'
			    }],
			    //차트타입
			    series: {
			        type: 'bar',
			        axis: 'left',
			        xField: 'date',
			        yField: 'count',
			        //그래프 내에 출력할 값
			        label: {
	                    field: 'count',
	                    display: 'insideEnd'
	                }
			    },
			    //데이터 출력
			    store: chartStore
			}
    ]
});

위에 보게되면 ExtJS 4.x 버전에서는 xtype : 'chart' 였었던 컴포넌트가 'cartesian' 이라고 변경이 되었습니다.

그리고 axes / series / store 속성은 

차트컴포넌트에서 패키지로 따라다니는 속성들이라고 생각하시면 되겠습니다.

'axes' 속성의 경우, 가로/세로의 축을 정의해주는 속성이며

'series' 속성의 경우는 차트컴포넌트의 타입 및 각 화면에 출력하고자 하는 값들의 정의를 나타내는 속성입니다.

세로형 막대그래프 실행결과

2.가로형 막대그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
		//가로형 막대차트컴포넌트
		{				
		    xtype: 'cartesian',
		    flipXY: true,
		    //위치
		    axes: [{
		        type: 'numeric',
		        position: 'bottom',
		        minimum: 0
		    }, {
		        type: 'category',
		        position: 'left'
		    }],
		    //차트타입
		    series: {
		        type: 'bar',
		        xField: 'date',
		        yField: 'count',
		        //그래프 내에 출력할 값
		        label: {
                    field: 'count',
                    display: 'insideEnd'
                }
		    },
		    //데이터 출력
		    store: chartStore
		}
    ]
});

가로형 막대그래프는 세로형과 다른점이 있다면 

축설정 axes 속성에 position이 변경되었으며 flipXY 속성을 TRUE로 지정을 해주셔야 

가로형으로 차트출력이 가능합니다.

가로형 막대그래프 실행결과

3.라인형(선형) 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
		//라인형 차트
		{
		    xtype: 'cartesian',
		    //위치
		    axes: [{
		        type: 'numeric',
		        position: 'left',
		        minimum: 0
		    }, {
		        type: 'category',
		        position: 'bottom'
		    }],
               series: [{
                   type: 'line',
                   xField: 'date',
                   yField: 'count',
                   //결과값을 그래프에 출력하기 위한 속성
                   label: {
                       field: 'count',
                       display: 'over'
                   }
               }],
		    //데이터 출력
		    store: chartStore
		} 
    ]
});

선형 그래프는 맨위에 티스토리 통계 이미지를 출력한 그래프와 동일한 화면구성을 해주는 그래프입니다.

"series" 속성의 type이 'line'으로 변경된 점과 label 속성으로 그래프에 출력시켜준 속성이 변경 혹은 추가되었습니다.

라인형(선형)그래프 실행결과

위와같이 출력이 되었으나 화면이 넘쳐서 label 부분에 대한 

숫자값이 잘려보이는 현상이 발생합니다.

이 간격을 약간 조정을 해주기 위하여 "insetPadding","innerPadding" 속성을 

다음처럼 xtype: 'cartesian', 다음라인에 추가해주도록 합니다

insetPadding: 40,
innerPadding: {
     left: 40,
     right: 40
}, 

라인형 그래프 영역조정 후 재실행결과

위처럼 전체적으로 그래프사이즈가 줄어든 것을 확인하였습니다.

4.분산형 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
	   renderTo: Ext.getBody(),
	   width: 650,
	   height: 500,
	   title : '방문자통계',
	   layout: 'fit',
	   items: [
		{
		    xtype: 'cartesian',
		    //============간격조정============
		    insetPadding: 40,
		    innerPadding: {
		        left: 40,
		        right: 40
		    },
		    //============간격조정============
		    //위치
		    axes: [{
		        type: 'numeric',
		        position: 'left',
		        minimum: 0
		    }, {
		        type: 'category',
		        position: 'bottom'
		    }],
		    series: [{
		        type: 'scatter',
		        xField: 'date',
		        yField: 'count',
		        tooltip: {
		            trackMouse: true,
		            renderer: function(storeItem, item) {
		                this.setHtml(storeItem.get('date') + '일 : ' + storeItem.get('count') + ' 명');
		            }
		        }
		    }],
		    //데이터 출력
		    store: chartStore
		}
    ]
});

분산형그래프 코드에서 기존 그래프 컴포넌트들과 차이라면 

'series' 타입이 'scatter'이라는 점과 tooltip 속성이 추가되었다는 점입니다.

툴팁속성은 출력된 분산형 그래프에 마우스오버를 하게되면 

해당 그래프에 대한 데이터 결과값이 툴팁처럼 출력이 되어 나타나는 속성입니다.

※ 툴팁은 타그래프에서도 사용가능한 기능입니다.

분산형 그래프 실행결과

'cartesian' 타입의 마지막 샘플인 "영역형 그래프"에 대한 샘플코드를 보도록 하겠습니다.

5.영역형 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
	 {
		    xtype: 'cartesian',
		    //============간격조정============
		    insetPadding: 40,
            //============간격조정============
		    //위치
		    axes: [{
		        type: 'numeric',
		        position: 'left',
		        minimum: 0
		    }, {
		        type: 'category',
		        position: 'bottom'
		    }],
               series: [{
                   type: 'area',
                   xField: 'date',
                   yField: 'count',
                   //툴팁
                   tooltip: {
                       trackMouse: true,
                       renderer: function(storeItem, item) {
                           this.setHtml(storeItem.get('date') + '일 : ' + storeItem.get('count') + ' 명');
                       }
                   }
               }],
		    //데이터 출력
		    store: chartStore
		}
    ]
});

영역형 그래프 실행결과

지금까지 xtype이 'cartesian'인 차트 종류에 대하여 알아보았습니다.

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

by 개발로짜

질문) 팝업창에서 데이터 처리후 해당값을 부모창에 넘겨주는 것을 만드는데요. 

        공통팝업이다보니, 호출이 필요한 화면에서는 호출될 동일한 메소드명을 만들고 해당 팝업은 그냥 그 메소드명을 호출하는것으로 처리하려는데, 

        해당 메소드들을 못찾습니다.. 

        어떻게 해야 팝업 윈도우에서 부모 창의 메소드를 호출할수 있을까요? 

        (--> 팝업창의 grid 선택하고 적용버튼 누름, 해당 grid 를 넘겨서.. 선택된 row 의 값들을 각 화면에서 처리하는것입니다.)

답변) 위에 대한 내용만으로는 어떠한 결과를 원하시는지 이해가 되지 않아 2가지 경우를 예를들어 답변드리도록 하겠습니다.

1. 동일 폼패널 2개 생성후, ExtJS Window컴포넌트의 자식 그리드컴포넌트에서 row 선택후 적용버튼 적용

<div id="panel1"></div>
<div id="panel2"></div>

제일먼저 임의의 폼패널 2개를 생성하기 위하여 각각 div 2개를 작성하였습니다.

Ext.onReady(function(){
	Ext.create("Ext.form.Panel",{
		renderTo : document.getElementById("panel1"),
		title : '주소검색 샘플예제(1)',
		width: 600,
		items : [{
			fieldLabel: '우편번호',
			name : 'zipcode',
			xtype : 'textfield',
        },{
			fieldLabel: '기본주소',
			name : 'default_address',
			xtype : 'textfield'
        },{
			fieldLabel: '상세주소',
			name : 'detail_address',
			xtype : 'textfield'
        }],
        fbar : [{
        	xtype : 'button',
        	text : '검색',
        	handler : function(btn){
        		if(Ext.getCmp("addrWindow") == undefined) {
        			showWindow(btn);
        		}
        	}
        }]
	});
	
	Ext.create("Ext.form.Panel",{
		renderTo : document.getElementById("panel2"),
		title : '주소검색 샘플예제(2)',
		width: 600,
		items : [{
			fieldLabel: '우편번호',
			name : 'zipcode',
			xtype : 'textfield',
        },{
			fieldLabel: '기본주소',
			name : 'default_address',
			xtype : 'textfield'
        },{
			fieldLabel: '상세주소',
			name : 'detail_address',
			xtype : 'textfield'
        }],
        fbar : [{
        	xtype : 'button',
        	text : '검색',
        	handler : function(btn){
        		if(Ext.getCmp("addrWindow") == undefined) {
        			showWindow(btn);
        		}
        	}
        }]
	})
})
function showWindow(btn){
	Ext.create('Ext.window.Window',{
		id : 'addrWindow',
		width : 700,
		height : 300,
		title : '주소검색창',
		items : [{
			xtype : 'grid',
			columns : [{
				text : '우편번호',
				flex : 1,
				dataIndex : 'zipcode'
			},{
				text : '주소',
				flex : 1,
				dataIndex : 'address'
			}],
			store : Ext.create("Ext.data.Store",{ 
				fields : ['zipcode','address'],
				data : [{
					zipcode : '111-222',
					address : '서울 종로구 삼청동'
				},{
					zipcode : '333-444',
					address : '경기 안양시 만안동'
				},{
					zipcode : '333-454',
					address : '경기 광주시 태전종'
				}],
				proxy : {
					type : 'memory'
				}
			})
		}],
		fbar : [{
			xtype : 'button',
			text : '적용',
			handler : function(btn2){
				var gridObj = Ext.getCmp("addrWindow").down("grid");
				var selectgrid = gridObj.getSelectionModel().getSelection()[0];
				var zipcode = selectgrid.get("zipcode");
			   	var address = selectgrid.get("address");
			   	var zipcodeObj = btn.up("form").down("textfield[name=zipcode]")
			   	var addressObj = btn.up("form").down("textfield[name=default_address]")
			   	//부모창 호출함수
			   	setPanel(gridObj,zipcode,address,zipcodeObj,addressObj);
			}
		}]
	}).show();
}
function setPanel(obj,zipcode,address,parent_zipcode,parent_address){
	parent_zipcode.setValue(zipcode);
	parent_address.setValue(address);
   	obj.up("window").close();
}

showWindow() 함수

그리드패널을 자식컴포넌트로 가지는 윈도우 컴포넌트를 폼패널의 검색버튼 클릭시 화면에 출력시키며 

윈도우화면의 적용버튼 클릭시 선택된 그리드 ROW의 각 값을 setPanel 함수로 보내주는 기능을 가진 

컴포넌트출력 + 기능함수입니다.

setPanel() 함수

각 선택된 값들을 폼패널의 입력컴포넌트에 대입을 하며 

윈도우창을 CLOSE 해주는 기능을 가진 함수입니다.

실행을 해보도록 하겠습니다.

Window 컴포넌트 실행결과

우선 요청 주셨던 함수 하나로 검색버튼 위치에 따라 

그리드내에 선택값이 해당 폼필드로 적용되는것을 확인 할 수 있습니다.

2. 일반 입력태그에 window.open으로 호출한 팝업내 그리드 패널에서 부모창 입력값에 내용전달하기

<form action="/전송URL" method="post" name="frm">
	우편번호 : <input type="text" name="zipcode"  /><input type="button" onclick="popuptest()" value="검색"/><br/>
	기본주소 : <input type="text" name="default_address"  /><br/>
</form>

위와같이 일반 HTML 소스코드 작성후 FUNCTION 2개를 SCRIPT 태그내에 정의합니다.

function popuptest(){
	window.open("/pop.html","test","'scrollbars=yes,toolbar=yes,resizable=yes,width=500,height=500,left=0,top=0");
}
function setadderss(zipcode,address) {
	document.frm.zipcode.value = zipcode;
	document.frm.default_address.value = address;
}

window.open으로 호출해준 pop.html 페이지다 하단 스크립트 코드를 적용합니다.

※ 부모창에는 ExtJS 연동을 할필요가 없으므로 ExtJS 관련 CSS 및 JS 파일을 INCLUDE 할 필요가 없습니다.

    대신 WINDOW.OPEN 호출한 pop.html 파일에는 ExtJS관련 파일들을 include 해주어야 합니다.

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		title : '그리드샘플',
		width : 500,
		height : 500,
		items : [{
			xtype : 'grid',
			columns : [{
				text : '우편번호',
				flex : 1,
				dataIndex : 'zipcode'
			},{
				text : '주소',
				flex : 1,
				dataIndex : 'address'
			}],
			store : Ext.create("Ext.data.Store",{ 
				fields : ['zipcode','address'],
				data : [{
					zipcode : '111-222',
					address : '서울 종로구 삼청동'
				},{
					zipcode : '333-444',
					address : '경기 안양시 만안동'
				},{
					zipcode : '333-454',
					address : '경기 광주시 태전종'
				}],
				proxy : {
					type : 'memory'
				}
			})
		}],
		fbar : [{
			xtype : 'button',
			text : '적용',
			handler : function(btn){
				var gridObj = btn.up("panel").down("grid");
				var selectgrid = gridObj.getSelectionModel().getSelection()[0];
				var zipcode = selectgrid.get("zipcode");
			   	var address = selectgrid.get("address");
			   	opener.setadderss(zipcode,address);
			   	self.close();
			}
		}]
	})
})

실행결과를 보도록 하겠습니다.

위처럼 정상적으로 팝업창의 선택 그리드 ROW 값이 부모입력화면에 대입이 되었습니다.

by 개발로짜

"ExtJS_OS" 님께서 질문주신 ExtJS 4.X버전으로 DATAVIEW 응용내용에 대한 답변 샘플입니다.

질문1)  DataView를 사용시 동적으로 tpl을 변경할 수 있을 까요? el에서 변경을 해야할지요..?

답변 : 네 동적으로 TPL속성을 이용하여 템플릿 변경이 가능합니다.

패널 툴바에 버튼 클릭시 tpl 타입변경은 다음과 같습니다.

데이터스토어에 대한 데이터는 동일하다 가정하고 템플릿을 변경하게끔 예를 들었습니다.

Style 코드 정의

div.item {
	background-color: blue;
	color: white;
}
span.item {
	background-color: red;
	color: white;
}

memory 타입의 데이터 스토어를 이용한 ExtJS 코드

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		title : '동적 TPL 생성예제',
		width : 200,
		height : 200,
		items:[{
	              xtype : 'dataview',
	              id : 'dynamic_dataview',
            	  tpl: new Ext.XTemplate(
	                      '<tpl for=".">',
	                           '<div class="item">',
	                                   '{title}',
	                           '</div>',
	                       '</tpl>'),
	              itemSelector: '.item',
	              store : Ext.create('Ext.data.Store',{
	                              fields : ['title'],
	                              data: [
	                                   {title:'EXTJS_DATAVIEW내용1'},
	                                   {title:'EXTJS_DATAVIEW내용2'},
	                                   {title:'EXTJS_DATAVIEW내용3'},
	                                   {title:'EXTJS_DATAVIEW내용4'}
	                              ],
	                              proxy: {
	                                   type: 'memory'
	                              }
	                       })
        }],
		fbar : [{
			text : '동적 TPL 변경하기',
			handler : function(btn) {
				//dataview컴포넌트.tpl 속성에 새로운 XTemplate 적용
				Ext.getCmp("dynamic_dataview").tpl = new Ext.XTemplate('<tpl for=".">',
								                          					'<span class="item">',
								                                  				'{title}',
								                          					'</span>',
								                  	  					'</tpl>');
				//dataview컴포넌트객체.refresh()를 통해 화면 재정의
				Ext.getCmp("dynamic_dataview").refresh();
			}
		}]
	})
})

동적 템플릿의 핵심은 dataview의 tbl에 새로운 템플릿을 담아 주신 다음 

dataview refresh() 함수를 적용해시면 되겠습니다.

질문2)  DataView의 Store를 원하는 시점에 호출이 가능한가요?

답변 : 네 동적호출 가능합니다. 

         단, proxy type이 'ajax'일 경우이거나 'memory' 타입의 data내에 값이 존재하지 않는상태에서 

         이벤트 발생시 store에 add로 작업해주셔야 합니다. 

         이유는 Store가 autoLoad되는 시점은 데이터스토어 공간내에 data에 데이터가 존재하면 

          autoLoad 속성을 무시하고 자동 호출이 됩니다.

동적으로 Store 호출을 위한 샘플 코드 입니다

이벤트 발생시 데이터스토어 load하여 dataview에 출력시키는 샘플스크립트

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		title : '동적으로 데이터스토어 호출',
		width : 200,
		height : 200,
		items:[{
	              xtype : 'dataview',
	              id : 'dynamic_dataview',
            	  tpl: new Ext.XTemplate(
	                      '<tpl for=".">',
	                           '<div class="item">',
	                                   '{title}',
	                           '</div>',
	                       '</tpl>'),
	              itemSelector: '.item',
	              store : Ext.create('Ext.data.Store',{
	                              fields : ['title'],
	                              proxy : {
	      							type : 'ajax',
	      							api : {
	      								read : '/dynamic.json'
	      							},
	      							reader : {
	      								type : 'json',
	      								success : "success",
	      								root : 'items'
	      							}
	      						}
	                       })
        }],
		fbar : [{
			text : '데이터스토어 호출',
			handler : function(btn) {
				Ext.getCmp("dynamic_dataview").getStore().load();
			}
		}]
	})
})

Ajax Call에서 response 받고자 하는 JSON 페이지내 샘플코드

{
	"items" : [{"title" : "동적데이터1" },{"title" : "동적데이터2" },{"title" : "동적데이터3" }],
	"success" : true
}

json 파일대신 db조회후 동적 데이터 생성할시,

 php / jsp 등 해당 json 파싱을 사용하셔서  규격에 맞춰서 작업하시면 되겠습니다.

by 개발로짜