[ExtJS강좌 8]그리드패널 - reconfigure dynamic column 컬럼 재설정하기

작업하다보면 하나의 그리드에서 동적으로 컬럼 및 데이터를 변경할때가 있을 것이다.

이럴때 사용하는 메서드가 reconfigure이다.

사용방법은

grid객체.reconfigure(새로적용할store,새로적용할컬럼model);

이다.

아직 기존 ExtJS 연동준비가 안되어 있으시다면 해당 링크로 세팅을 하신후

 

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

해당 부분 역시 링크(이전강좌인 memory 타입의 grid 포스팅)의 소스를 약간 변경하여 만들어 보도록 하겠음..

2014/06/09 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!!

기존 memory타입의 소스에서 추가적으로 어떠한 이벤트 발생시 그리드 재설정이 되도록 해야 

하므로 버튼을 하나 생성하도록 해보겠다. grid에 툴바를 생성하여 버튼을 만들도록 하겠다.

기존 그리드에 

다음과 같은 json array를 추가해주자

tbar: [
	{
		xtype: "button",
		text: "그리드재설정", 
		handler : function(btn){
			var grid = btn.up("grid")
		        grid.reconfigure(store2,model2);
		}
	}
 ]

툴바옵션에 xtype 은 html태그의 <input type=""> 과 유사하다고 보면 되겠다.

xtype을 버튼태그로 주고 "데이터재설정" 이란 text버튼을 만들었다. 

handler는 button 태그의 onclick 이벤트와 같다.

즉, handler -> 클릭이벤트 발생시 grid 객체의 reconfigure 해주는 것인대.

btn.up("grid") <- 이놈은 jquery의 셀렉터와 유사한 개념이다.

$(this).parent()... 이런형태인셈이다.

ExtJS 셀렉터로 그리드 객체를 찾은 후, 위에 설명했듯이

grid객체.reconfigure(store2라는 새로운 store변수, model2라는 새로운 컬럼정의 변수);

를 주었다.

이어서 store2와 model2에 대한 변수에 담겨진 json 객체들을 정의를 해주자

var store2 = Ext.create('Ext.data.Store',{
      		fields : [
	  	               {
	  	                   name : 'title1'
	  	               },
	  	               {
	  	                   name : 'title2'
	  	               },
	  	               {
	  	                   name : 'title3'
	  	               },
	  	               {
	  	                   name : 'title4'
	  	               }
	  	           ],
	  	           data : [
	  	               {
	  	                   title1 : '첫번째 값',
	  	                   title2 : '두번째 값',
	  	                   title3 : '세번째 값',
	  	               	   title4 : '네번째 값'
	  	               }
	  	           ],
	  	           proxy : {
	  	               type : 'memory'
	  	           }
	  	            
  	       });
        var model2 = [];
	//store에 정의된 컬럼과 일치하는 name이 4개이므로 컬럼을 4개 생성한다 - fields의 name을 맞춰준다
  	for(var i=0; i<4; i++) {
  		model2.push(
  			{
  			//그리드 컬럼에 보여줄 컬럼명
			text:  'Title'+(i+1),
			//그리드 넓이 조절
			flex:  1,
			//dataIndex : store -> fields name명과 동일시 해준다.
			dataIndex: 'title'+(i+1)
			}
  		);	
	}

각각의 store2/model2 변수에 각각의 기능을 담아주었다.

이제는 reconfigure(xxxx,xxx)에 변수들을 담아만 주면 컬럼재설정이 완료가 된다.

소스를 한번 동작시켜보도록 하자!!

1. 버튼 클릭전 (onLoad)

2. 버튼이벤트 발생 후

^______________________^ 잘 동작되는고만!!!

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!