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

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


    예를들어 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부분에  위코드들을 하나씩 적용이 되었다면 정상적으로 아래처럼 데이터 출력이 정상적으로 이루어질 것입니다. ▽



    지금까지 Grid Reconfigure에 대해서 알아보았습니다.

    다음장은 간단하게 MySQL에 저장되어있는 데이터를 이용하여 그리드 페이징처리를 진행하려 합니다.

    연동하고 계시는 웹서버의 DB 연동을 미리 해주시고 다음강좌를 진행해주세요.




    신고
    Posted by 몽고

    • 2015.07.15 12:35

      비밀댓글입니다

      • BlogIcon 몽고
        2015.07.15 14:01 신고

        실행은 해보지 않았으나, 대략적으로 확인해보니,
        store 객체에 대한 sync method를 주시면 자동으로 적용이 되는걸로 알고 있습니다 ^^;

        ㅠㅠ 중복으로 글을 너무 많이 올려주셨네요;;

      • LEE
        2015.07.15 23:20 신고

        넵 감사합니다
        너무 급해서요
        그런데 store 객체에 대한 sync method를 쓰면 삭제시에도 create, destroy, update가 다 실행이 되더라구요
        그래서 이게 삭제시에는 destroy만 update일경우에는 update만 되게 할려면 어떻게 해야되는지요? 따로 함수를 적용을 해야하는지요?
        아직 초보라 제가 질문더 드립니다 .
        답변에 대해서 너무 감사합니다

      • BlogIcon 몽고
        2015.07.16 10:39 신고

        해당 코드에 문제는 없습니다.

        혹시 insert / update / delete 부분처리 후, 서버페이지에서 JSON response 해줄때, success : true 값을 추가로 처리해주시는건지요?

        항상 모든 Create / Update / Destroy 의 response로는 성공여부에 대한 값을 응답받아야 합니다.

        올려주신 코드기준으로는 말씀해주신 crud가 한번에 호출되거나 그러지는 않습니다. 컨텍스트 메뉴로 추가메뉴 클릭시 insert.페이지를 호출하고 삭제메뉴 클릭시에는 정상적으로 destory 페이지를 호출합니다.

    • lee
      2015.07.23 00:01 신고

      안녕하세요
      아 답변 잘 보았습니다
      덕분에 해결점이 보이는것 같습니다
      감사합니다
      여기 저기 수소문 했지만 이렇게 알려주신것은 고수님 밖에 없네요
      정말 감사합니다
      ajax에서 success true를 지정하는것이 크네요
      감사합니다 ^^

티스토리 툴바