ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자

지난 시간, 콤보박스를 이용하여 간단하게 데이터스토어에 대한 개념을 익혀보았습니다.

store에 대하여 이해 하셨다면 그리드의 리스트 출력 역시 쉽게 접근하실 수 있겠습니다.

그리드 + 데이터스토어를 이용하여 

그리드패널에 리스트출력을 위한 기본적인 구조는 다음과 같습니다.

그리드패널 + 데이터스토어 기본구조

이전 콤보박스리스트를 표출하기 위해서 

combobox 2가지(displayField/valueField) 속성에 매칭을 시켜주었는데 

2014/10/30 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기

그리드의 경우, columns->dataIndex속성값과 매칭을 시켜주시면 되겠습니다.

샘플 코드를 한번 작성해보도록 하겠습니다.

STORE PROXY 타입이 'MEMORY'를 이용한 그리드 코드

Ext.onReady(function(){
	Ext.create("Ext.grid.Panel",{
		renderTo : Ext.getBody(),
		title : '그리드 샘플화면',
		width : 500,
		height : 300,
		columns : [{
			text : '블로거아이디',
			flex : 1,
			dataIndex : 'blogger_id'
		},{
			text : '블로거닉네임',
			flex : 1,
			dataIndex : 'blogger_name'
		},{
			text : '블로그주소',
			flex : 1,
			dataIndex : 'blogger_url'
		}],
		store : Ext.create("Ext.data.Store",{ 
					//data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
					fields : ['blogger_id','blogger_name','blogger_url'],
					data : [{
						blogger_id : 'guklife',
						blogger_name : '국이',
						blogger_url : 'guklife.tistory.com'
					},{
						blogger_id : 'hellogk',
						blogger_name : '개발로짜',
						blogger_url : 'hellogk.tistory.com'
					}],
					proxy : {
						//ajax 비동기 방식을 이용
						type : 'memory'
					}
				})
	})
})

샘플코드 실행결과

정상적으로 그리드내에 목록이 

출력이 되는것을 확인 할 수 있었습니다.

콤보박스의 경우 2개의 속성으로 제어할수 있는반면, 

그리드의 경우는 지정된 columns->dataIndex 속성의 수에따라 

지정하는 갯수만큼 여러개의 key지정이 가능합니다.

이어서 위 코드를 약간 변경하여 

proxy가 'ajax'인 방식으로 

목록출력 하는 샘플을 확인해 보도록 하겠습니다.

서버페이지측 사용라이브러리는 json-simple라이브러리를 사용하였으나 

본인의 환경에 맞추어 일부 변경을 하시면 되겠습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

STORE PROXY 타입이 'AJAX'를 이용한 그리드 코드(화면코드)

Ext.onReady(function(){
	Ext.create("Ext.grid.Panel",{
		renderTo : Ext.getBody(),
		title : '그리드 ajax 샘플화면',
		width : 500,
		height : 300,
		columns : [{
			text : '블로거아이디',
			flex : 1,
			dataIndex : 'blogger_id'
		},{
			text : '블로거닉네임',
			flex : 1,
			dataIndex : 'blogger_name'
		},{
			text : '블로그주소',
			flex : 1,
			dataIndex : 'blogger_url'
		}],
		store : Ext.create("Ext.data.Store",{
					autoLoad : true,
					//data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
					fields : ['blogger_id','blogger_name','blogger_url'],
					proxy : {
						//ajax 방식
						type : 'ajax',
						api : {
							//read - 응답데이터를 받아서 화면에 출력시킬경우
							read : '/grid_res.jsp'
						},
						//api->read 속성의 url값으로 부터 응답받은 object값을 받기 위한 속성
						reader : {
							type : 'json',
							successProperty : "success",
							rootProperty : 'grid_item'
						}
					}
				})
	})
})

위 코드의 데이터 스토어 부분 코드를 보면 autoLoad속성이 존재합니다.

이벤트(예를들어 버튼 클릭등) 를 발생하지 않고 

바로 화면에 출력 시켜주고자 한다면 

autoLoad 속성을 true로 지정해주셔야 합니다.

만약, 지정을 안하거나 이 옵션을 추가하지 않으셨다면 

그리드의 컬럼만 나오는 빈 껍데기만 화면에 출력이 되시는걸 확인 하실 수 있습니다.

STORE PROXY 타입이 'AJAX'를 이용한 그리드 코드(서버코드 - grid_res.jsp)

	JSONArray jsonArray = new JSONArray();
	JSONObject jsonGridRootObject = new JSONObject();
	JSONObject jsonGridObject = null;
	
	jsonGridObject = new JSONObject();
	jsonGridObject.put("blogger_id", "guklife");
	jsonGridObject.put("blogger_name", "국이");
	jsonGridObject.put("blogger_url", "guklife.tistory.com");
	jsonArray.add(jsonGridObject);
	
	jsonGridObject = new JSONObject();
	jsonGridObject.put("blogger_id", "hellogk");
	jsonGridObject.put("blogger_name", "개발로짜");
	jsonGridObject.put("blogger_url", "hellogk.tistory.com");
	jsonArray.add(jsonGridObject);
	
	jsonGridRootObject.put("success", true);
	jsonGridRootObject.put("grid_item", jsonArray);
	response.setContentType("text/plain; charset=UTF-8");
	PrintWriter pw = response.getWriter();
	pw.print(jsonGridRootObject);
	pw.flush();
	pw.close();

샘플코드 실행결과

ajax Call의 경우는 LoadMask가 출력이 되면서 

데이터가 출력이 되는 것을 확인 할 수 있습니다.

콤보박스에서 데이터스토어 개념을 잡으시고 진행하셨다면, 

그리드 목록 출력정도는 쉽제 접근 하셨을거라 생각합니다.

다음 포스팅은 그리드패널에 페이징툴바를 붙여서 

그리드 목록의 페이징 처리를 알아보도록 하겠습니다.

by 개발로짜