ExtJS의 그리드패널 reconfigure함수를 적용하여 컬럼 및 데이터 재설정하기

이번 강좌의 내용은 존재하는 그리드패널에 대한 컬럼 및 데이터를 

재설정 할경우를 위하여 포스팅해보도록 하겠습니다.

그리드패널에서 제공되는 reconfigure함수를 사용하면 재설정이 가능합니다.

그리드객체.reconfigure(신규데이터스토어,신규데이터모델);

한번 샘플코드를 이용하여 이해를 돕도록 해보겠습니다.

데이터스토어와 데이터모델을 각 2개씩 생성하여 변수에 담도록 하겠습니다.

이유는 초반에 그리드에 출력을위한 원본데이터와 reconfigure함수를 적용하여 

컬럼 재설정을 위한 변경데이터 이 2가지를 다룰때 필요하기 때문입니다.

	var original_store = Ext.create("Ext.data.Store",{
								//기존코드에 추가된 부분
								fields : ['original_1','original_2'],
								proxy : {
									type : 'memory'
								},
								data : [{
									original_1 : '원본_데이터1-1',
									original_2 : '원본_데이터1-2'
								},{
									original_1 : '원본_데이터2-1',
									original_2 : '원본_데이터2-2'
								}]
						});
	var original_model = [{
							text : '컬럼1',
							flex : 1,
							dataIndex : 'original_1'
						},{
							text : '컬럼2',
							flex : 1,
							dataIndex : 'original_2'
						}];
	
	var reconfigure_store = Ext.create('Ext.data.Store',{
						   	   fields : ['reconfigure_1','reconfigure_2','reconfigure_3','reconfigure_4'],
							           data : [{
							        	   reconfigure_1 : '재설정_데이터1',
							        	   reconfigure_2 : '재설정_데이터2',
							        	   reconfigure_3 : '재설정_데이터3',
							        	   reconfigure_4 : '재설정_데이터4'
							               }],
							           proxy : {
							               type : 'memory'
							           }
							});
	
	var reconfigure_model = [{
								text : '컬럼재설정1',
									flex : 1,
									dataIndex : 'reconfigure_1'
								},{
									text : '컬럼재설정2',
									flex : 1,
									dataIndex : 'reconfigure_2'
								},{
									text : '컬럼재설정3',
									flex : 1,
									dataIndex : 'reconfigure_3'
								},{
									text : '컬럼재설정4',
									flex : 1,
									dataIndex : 'reconfigure_4'
							}];

위와같이 각각의 데이터들을 변수에 담은 후 

그리드 패널에 대한 정의를 해보도록 하겠습니다.

	Ext.create("Ext.grid.Panel",{
		renderTo : Ext.getBody(),
		title : '그리드 컬럼재설정 샘플',
		width : 600,
		height : 300,
		id : 'grid_object',
		columns :original_model,
		store : original_store,
		fbar : [{
			xtype : 'button',
			text : '원복하기',
			id : 'original',
			disabled : true,
			handler : function(btn){
				Ext.MessageBox.show({
			        title: '메시지', 
			        msg: '그리드 컬럼을 원복 하시겠습니까?',
			        //메시지창 애니메이션 show
			        animateTarget : btn,
			        buttons: Ext.MessageBox.OKCANCEL,
			        icon : Ext.MessageBox.INFO,
			        fn : function(btn2){
			        	if(btn2 == "ok") {
			        		Ext.getCmp("grid_object").reconfigure(original_store,original_model);
			        		Ext.getCmp("original").setDisabled(true);
			        		Ext.getCmp("reconfigure").setDisabled(false);
 							
			        	}
			        }
			    });
			}
		},{
			xtype : 'button',
			text : '컬럼재설정',
			id : 'reconfigure',
			handler : function(btn){
				Ext.MessageBox.show({
			        title: '메시지', 
			        msg: '그리드 컬럼을 재설정 하시겠습니까?',
			        //메시지창 애니메이션 show
			        animateTarget : btn,
			        buttons: Ext.MessageBox.OKCANCEL,
			        icon : Ext.MessageBox.INFO,
			        fn : function(btn2){
			        	if(btn2 == "ok") {
			        		Ext.getCmp("grid_object").reconfigure(reconfigure_store,reconfigure_model);
			        		Ext.getCmp("original").setDisabled(false);
			        		Ext.getCmp("reconfigure").setDisabled(true);
 							
			        	}
			        }
			    });
			}
		}]
	})

이번에는 코드가 약간 길어졌습니다.

이전 강좌를 꾸준히 구독하신 분들이시라면 보던 코드일 것입니다.

※ 데이터스토어 및 모델들을 담은 변수와 그리드패널 생성코드를 

Ext.onReady 내에 정의해주세요.

간단히 그리드패널 생성부분에 대하여 설명을 드리자면 

그리드패널 하단에 툴바적용 후, 

버튼컴포넌트를 2개(원복하기,컬럼재설정) 생성하였습니다.

그리고 각 버튼의 handler 속성을 이용하여 

클릭 이벤트 발생시 기능들을 정의해주었습니다.

클릭이벤트 발생시 다이얼로그창을 띄워서 'OK' 버튼을 클릭하게 된다면 

reconfigure 함수를 적용하여 그리드 컬럼및 데이터 재 설정 후, 

클릭이벤트가 발생된 버튼을 비활성시키고 

다른 버튼을 활성화 시키는 함수를 적용하였습니다.

여기서 Ext.getCmp("XXX")라고 작성을 하였는데 

무엇이냐면 jQuery의 아이디셀렉터와 동일한 개념의 셀렉터입니다.

Ext.getCmp("id") = $("#id")

위와같은 개념이라 생각하시면 되겠습니다.

그럼 이제 실행을 한번 하여 결과를 확인해보도록 할까요??

1.초기실행화면

2.재설정버튼클릭시다이얼로그표시

3.재설정다이얼로그OK버튼클릭

4.원복하기버튼클릭시다이얼로그표시

5.원복다이얼로그OK버튼클릭

정상적으로 컬럼 및 데이터들의 변경이 완료되었습니다.

그리드에 대한 포스팅인 이번장으로 마무리 하도록 하겠습니다.

다음 포스팅은 트리패널에 대하여 알아보도록 하겠습니다.

by 개발로짜