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

웹개발강좌/ExtJS

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

개발로짜 2014. 11. 5. 08:00

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

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

그리드패널에서 제공되는 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 함수를 적용하여 그리드 컬럼및 데이터 재 설정 후,

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