ExtJS 기초강좌 18 - 그리드(Grid) 컬럼 및 데이터 재설정하기

ExtJS 2015. 6. 18. 09:09

이번장은 "그리드 재설정" 에 관한 강좌를 진행 하도록 하겠습니다.

그리드 재설정은 간혹가다 한 화면에 그리드 하나를 생성한 후, 데이터 및 컬럼을 변경해야 할 상황이 존재합니다.

예를들어 SQL Client GUI 를 예를 들어보도록 하겠습니다.

특정 테이블을 조회한 결과입니다. △

이번에는 다른 테이블을 조회해보도록 하겠습니다.

한 화면에서 그리드의 컬럼 및 데이터만 변경되어 다른 테이블을 조회하였습니다. △

한페이지에 Grid Reconfigure 를 구현하고자 하는 분에게는 유용한 내용이 되지 않을까 싶습니다.

이전 시간 웹서버 연동한 후 진행한것과 동일한 구조로 시작하겠습니다.

전에 생성한 index.html을 코드 변경을 하셔도 되고, 파일을 신규로 생성하셔도 무관합니다.

이번 장 역시, DB통신없이 JSON 파일 2개를 이용하여 Grid Reconfigure 관련하여 진행하겠습니다.

▶ grid_data2_1.json 샘플코드

{
data : [{
	idx : 1,
	title : 'title1',
	contents : 'aaaaaaaaaa'
},{
	idx : 2,
	title : 'title2',
	contents : 'bbbbbbbbbb'
},{
	idx : 3,
	title : 'title3',
	contents : 'ccccccccc'
},{
	idx : 4,
	title : 'title4',
	contents : 'dddddddd'
},{
	idx : 5,
	title : 'title5',
	contents : 'eeeeeeeeeee'
},{
	idx : 6,
	title : 'title6',
	contents : 'fffffffffffff'
}]
}

▶ grid_data2_2.json 샘플코드


{
data : [{
	pri : 1,
	subject : 'subject1',
	txt : 'fffffffffffffff'
},{
	pri : 2,
	subject : 'subject2',
	txt : 'gggggggggggg'
},{
	pri : 3,
	subject : 'subject3',
	txt : 'hhhhhhhhhhhh'
},{
	pri : 4,
	subject : 'subject4',
	txt : 'zzzzzzzzzzzz'
}]
}

상단 JSON 샘플코드 2개를 이용하여 진행해보도록 하겠습니다.

Ext.grid.Panel 클래스의 reconfigure( [store] , [columns] ) 메서드를 사용할겁니다.

해당 설명에 대한 문서를 대략적으로 설명해보자면,

그리드 또는 트리의 새로운 스토어 그리고(또는) 컬럼들을 재설정한다.

스토어와 컬럼들은 또한 입력값으로부터 패스또한 가능하다.

사 용 법

그리드객체.reconfigure( store , columns );

추가적으로, 아래와같이 컬럼 또는 데이터스토어 모두 사용하지않고 하나만 이용이 가능하다.

그리드객체.reconfigure(store);

또는

그리드객체.reconfigure(columns);

또는

그리드객체.reconfigure(null , columns);

그럼 우선적으로 빈껍데기를 가지는 그리드패널의 프레임만을 우선 코드로 작성해보도록 하겠습니다.

▶ 그리드 프레임 샘플코드


Ext.onReady(function(){
	Ext.create('Ext.grid.Panel',{
		id : 'grid_frame',
		height : 300,
		title : 'Grid Example',
		bbar : [{
			xtype : 'button',
			text : '2_1 JSON Load',
			handler : function(){
				// code here
			}
		},{
			xtype : 'button',
			text : '2_2 JSON Load',
			handler : function(){
				// code here
			}
		}],
		renderTo : Ext.getBody(),
	})
})

▶ 실행결과

그리드패널 껍데기와 패널의 하단 툴바에 버튼 2개를 생성하였습니다.

각 버튼을 클릭할때마다 reconfigure() 메서드를 호출하여 그리드 재설정 기능을 적용해야 합니다.

그러기 위해서 상단에 정의했던 JSON 파일 2개에 대한 각각의 columns 와 store 객체를 각각의 변수에 담아주도록 하겠습니다.

※ 그리드 패널 생성코드 이전에 해당 코드를 작성해주세요.

▶ 각 JSON 파일을 비동기방식으로 호출하기 위한 코드


/////////// grid_data2_1.json file Load Columns / Data Store /////////// 
	var column_2_1 = [{
		text : 'IDX',
		flex : 1,
		dataIndex : 'idx'
	},{
		text : 'TITLE',
		flex : 1,
		dataIndex : 'title'
	},{
		text : 'CONTENTS',
		flex : 1,
		dataIndex : 'contents'
	}];
	var store_2_1 = Ext.create('Ext.data.Store',{
							autoLoad : true,
							fields : ['idx','title','contents'],
							 proxy : {
					             type : 'ajax',
					             api : {
					                 read : './grid_data2_1.json'
					             },
					             reader : {
					                 type : 'json',
					                 rootProperty : 'data'
					             }
					         }
					});
	
	/////////// grid_data2_2.json file Load Columns / Data Store ///////////
	var column_2_2 = [{
		text : 'PRI',
		flex : 1,
		dataIndex : 'pri'
	},{
		text : 'SUBJECT',
		flex : 1,
		dataIndex : 'subject'
	},{
		text : 'TXT',
		flex : 1,
		dataIndex : 'txt'
	}];
	
	var store_2_2 = Ext.create('Ext.data.Store',{
							autoLoad : true,
							fields : ['pri','subject','txt'],
							 proxy : {
					             type : 'ajax',
					             api : {
					                 read : './grid_data2_2.json'
					             },
					             reader : {
					                 type : 'json',
					                 rootProperty : 'data'
					             }
					         }
					});

각 JSON 파일을 load 해주기 위한 코드를 작성하였습니다.

마지막으로 버튼 클릭 시, reconfigure 메서드를 이용해서 그리드에 각각의 파일들을 호출해줘야 하겠습니다.

주석처리되어있는//code here영역에 다음 각 코드들을 순서대로 작성해줍니다.

Ext.getCmp("grid_frame").reconfigure(store_2_1,column_2_1); Ext.getCmp("grid_frame").reconfigure(store_2_2,column_2_2);

각 handler부분에 위코드들을 하나씩 적용이 되었다면 정상적으로 아래처럼 데이터 출력이 정상적으로 이루어질 것입니다. ▽