지난 시간, 콤보박스를 이용하여 간단하게 데이터스토어에 대한 개념을 익혀보았습니다.
store에 대하여 이해 하셨다면 그리드의 리스트 출력 역시 쉽게 접근하실 수 있겠습니다.
그리드 + 데이터스토어를 이용하여
그리드패널에 리스트출력을 위한 기본적인 구조는 다음과 같습니다.
이전 콤보박스리스트를 표출하기 위해서
combobox 2가지(displayField/valueField) 속성에 매칭을 시켜주었는데
2014/10/30 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기
그리드의 경우, columns->dataIndex속성값과 매칭을 시켜주시면 되겠습니다.
샘플 코드를 한번 작성해보도록 하겠습니다.
Ext.onReady(function(){ Ext.create("Ext.grid.Panel",{ renderTo : Ext.getBody(), title : '그리드 샘플화면', width : 500, height : 300, columns : [{ text : '블로거아이디', flex : 1, dataIndex : 'blogger_id' },{ text : '블로거닉네임', flex : 1, dataIndex : 'blogger_name' },{ text : '블로그주소', flex : 1, dataIndex : 'blogger_url' }], store : Ext.create("Ext.data.Store",{ //data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다. fields : ['blogger_id','blogger_name','blogger_url'], data : [{ blogger_id : 'guklife', blogger_name : '국이', blogger_url : 'guklife.tistory.com' },{ blogger_id : 'hellogk', blogger_name : '개발로짜', blogger_url : 'hellogk.tistory.com' }], proxy : { //ajax 비동기 방식을 이용 type : 'memory' } }) }) })
정상적으로 그리드내에 목록이
출력이 되는것을 확인 할 수 있었습니다.
콤보박스의 경우 2개의 속성으로 제어할수 있는반면,
그리드의 경우는 지정된 columns->dataIndex 속성의 수에따라
지정하는 갯수만큼 여러개의 key지정이 가능합니다.
이어서 위 코드를 약간 변경하여
proxy가 'ajax'인 방식으로
목록출력 하는 샘플을 확인해 보도록 하겠습니다.
서버페이지측 사용라이브러리는 json-simple라이브러리를 사용하였으나
본인의 환경에 맞추어 일부 변경을 하시면 되겠습니다.
2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기
Ext.onReady(function(){ Ext.create("Ext.grid.Panel",{ renderTo : Ext.getBody(), title : '그리드 ajax 샘플화면', width : 500, height : 300, columns : [{ text : '블로거아이디', flex : 1, dataIndex : 'blogger_id' },{ text : '블로거닉네임', flex : 1, dataIndex : 'blogger_name' },{ text : '블로그주소', flex : 1, dataIndex : 'blogger_url' }], store : Ext.create("Ext.data.Store",{ autoLoad : true, //data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다. fields : ['blogger_id','blogger_name','blogger_url'], proxy : { //ajax 방식 type : 'ajax', api : { //read - 응답데이터를 받아서 화면에 출력시킬경우 read : '/grid_res.jsp' }, //api->read 속성의 url값으로 부터 응답받은 object값을 받기 위한 속성 reader : { type : 'json', successProperty : "success", rootProperty : 'grid_item' } } }) }) })
위 코드의 데이터 스토어 부분 코드를 보면 autoLoad속성이 존재합니다.
이벤트(예를들어 버튼 클릭등) 를 발생하지 않고
바로 화면에 출력 시켜주고자 한다면
autoLoad 속성을 true로 지정해주셔야 합니다.
만약, 지정을 안하거나 이 옵션을 추가하지 않으셨다면
그리드의 컬럼만 나오는 빈 껍데기만 화면에 출력이 되시는걸 확인 하실 수 있습니다.
JSONArray jsonArray = new JSONArray(); JSONObject jsonGridRootObject = new JSONObject(); JSONObject jsonGridObject = null; jsonGridObject = new JSONObject(); jsonGridObject.put("blogger_id", "guklife"); jsonGridObject.put("blogger_name", "국이"); jsonGridObject.put("blogger_url", "guklife.tistory.com"); jsonArray.add(jsonGridObject); jsonGridObject = new JSONObject(); jsonGridObject.put("blogger_id", "hellogk"); jsonGridObject.put("blogger_name", "개발로짜"); jsonGridObject.put("blogger_url", "hellogk.tistory.com"); jsonArray.add(jsonGridObject); jsonGridRootObject.put("success", true); jsonGridRootObject.put("grid_item", jsonArray); response.setContentType("text/plain; charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.print(jsonGridRootObject); pw.flush(); pw.close();
ajax Call의 경우는 LoadMask가 출력이 되면서
데이터가 출력이 되는 것을 확인 할 수 있습니다.
콤보박스에서 데이터스토어 개념을 잡으시고 진행하셨다면,
그리드 목록 출력정도는 쉽제 접근 하셨을거라 생각합니다.
다음 포스팅은 그리드패널에 페이징툴바를 붙여서
그리드 목록의 페이징 처리를 알아보도록 하겠습니다.
by 개발로짜
ExtJS의 그리드패널 reconfigure함수를 적용하여 컬럼 및 데이터 재설정하기 (0) | 2014.11.05 |
---|---|
ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기 (10) | 2014.11.03 |
ExtJS 강좌 - 데이터스토어(store)의 proxy ajax를 통하여 콤보박스 목록 출력시켜보기 (0) | 2014.10.30 |
ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기 (0) | 2014.10.30 |
ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법 (0) | 2014.10.28 |