지난 시간에 데이터스토어의 개념을 이해하기위하여
프록시타입을 memory로 주어 간단하게
콤보박스 컴포넌트에 목록을 구현해보았습니다.
이번에는 프록시타입이 ajax에 대하여 다루어보도록 하겠습니다.
우선 컴포넌트 + 데이터스토어 + remote페이지의 request/response 구조는 다음과 같습니다.
콤보박스 컴포넌트에서 데이터 스토어를 정한다음
proxy 타입을 ajax로 설정을 해준다음 지정해놓은 서버페이지를 통신하여
json object 데이터를 response하게 됩니다.
그럼 응답받은 데이터들은 지난 시간에 했던
store의 data 속성값에 들어간다고 생각하시면 되겠습니다.
※ 참고로 응답받을수 있는 데이터는 JSON,XML,ARRAY가 있습니다.
저는 항상 JSON 방식으로 RESPONSE 받도록 하겠습니다.
2014/10/30 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기
위 포스팅의 콤보박스 예제코드를 응용하여
데이터스토어의 "ajax call"에 대한 예를 들어보도록 하겠습니다.
서버페이지에서 json object를 response 해주기 위해서
json-simple 라이브러리를 사용하겠습니다.
하단 포스팅을 참고하셔서 json-simple jar파일을 라이브러리 폴더에 include 해놓습니다.
2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기
Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ renderTo : Ext.getBody(), width : 300, height : 300, title : '콤보박스예제코드', items : [{ //콤보박스 컴포넌트 선언 xtype : 'combo', //최초에는 빈값이 출력되므로 설정 emptyText : '선택', //화면에 보여주는 store data속성의 key값 displayField: 'option_text', //실제 선택되었을때의 store data속성의 key값 valueField: 'option_value', //default true값이여서 화면에 보여지는 displayField값 수정이 됩니다. //false로 지정해줘야 제대로된 콤보박스기능이 동작됩니다. editable : false, //데이터 스토어 사용 store : Ext.create("Ext.data.Store",{ //data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다. fields : ['option_text','option_value'], proxy : { //ajax 비동기 방식을 이용 type : 'ajax', api : { //read 속성을 response 데이터를 받을경우 사용합니다. //db의 select 쿼리의결과를 받을 경우 read : '/response.jsp' }, //api->read 속성의 url값으로 부터 응답받은 object값을 받기 위한 속성 reader : { type : 'json', successProperty : "success", rootProperty : 'items' } } }) }] }) })
이전코드와 다른점이 있다면 proxy 내에 설정한 코드일부가 다를겁니다.
type 이 'memory' -> 'ajax'로 변경이 되었으며
ajax call을 위한 api,reader 속성값들이 정의 되어있습니다.
데이터스토어의 api 속성에는 create/upload/destroy 속성이 존재하나
스토어의 crud에 대해서는 그리드패널 주제로 포스팅할 때 다루도록 하겠습니다.
그리고 api -> read 속성을 정의 하였는데 이 read 속성이 정의를 하면
reader 속성도 같이 함께 정의 해주어야 합니다.
read/reader는 한묶음으로써
1+1 이라고 이해하시면 되겠습니다.
reader 내에 정의된 type/successProperty/rootProperty 속성이 존재하는데
type의 경우는 서버페이지로부터 response 받은 데이터타입을 의미합니다.
type은 xml/array/json 등을 지원하지만 json을 주로 사용을 합니다.
successProperty 속성은 정의하지 않아도 무관하나
만약 어떤 경우에는 목록이 보여야하고
반대로 어느경우에는 목록이 보여서는 안되는 케이스가 존재할때
이 successProperty 속성을 정의 해줍니다.
default key가 "success"로 정의 되어있고
value 는 true/false로 정해주시면 되겠습니다.
그리고 rootProperty속성은 중요한 속성입니다.
바로 response object의 root key값을 정의해주는 것인대
지난 포스팅에 memory 타입시 콤보박스 목록을 출력하기 위해
store의 data 속성에 임시 데이터들을 정의한적이 있습니다.
이 data 속성의 기능과 동일하게 동작시켜주기 위한 속성값이
바로 rootProperty속성입니다.
※ 꼭 기억해두도록 합니다.
JSONArray jsonArray = new JSONArray(); JSONObject jsonObject = new JSONObject(); JSONObject jsonObjectSub = null; jsonObjectSub = new JSONObject(); jsonObjectSub.put("option_text", "보여주는값1"); jsonObjectSub.put("option_value", "선택값1"); jsonArray.add(jsonObjectSub); jsonObjectSub = new JSONObject(); jsonObjectSub.put("option_text", "보여주는값2"); jsonObjectSub.put("option_value", "선택값2"); jsonArray.add(jsonObjectSub); jsonObjectSub = new JSONObject(); jsonObjectSub.put("option_text", "보여주는값3"); jsonObjectSub.put("option_value", "선택값3"); jsonArray.add(jsonObjectSub); // successProperty 속성의 key값과 맞춰주며 true/false로 정해줍니다. jsonObject.put("success", true); // 최상단의 key값은 rootProperty 속성의 key로 정의해준값과 맞춰줍니다. jsonObject.put("items", jsonArray); response.setContentType("text/plain; charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.print(jsonObject); pw.flush(); pw.close();
서버페이지내에 JSON OBJECT를 생성 후 클라이언트 페이지로 응답을 주었습니다.
응답데이터의 결과는 다음과 같겠습니다.
items : [{ "option_text" : "보여주는값1", "option_value" : "선택값1" },{ "option_text" : "보여주는값2", "option_value" : "선택값2" },{ "option_text" : "보여주는값3", "option_value" : "선택값3" } ]
json object 를 store에서 callback으로 받았습니다.
단, 콤보박스 목록을 출력시키기위한 버튼클릭시
로딩바가 출력되면서 콤보박스내 목록이 출력될것입니다.
그이유는 store의 autoLoad라는 속성이 존재하는데
지정을 해주지 않았기 때문에
이벤트 발생시 store가 load되는 것입니다.
만약 이벤트 없이 미리 store에 담아놓고 싶으실경우
store속성에 autoLoad : true 라는 설정을 추가로 잡아주시면 되겠습니다.
실행결과를 보시도록 하겠습니다.
초기화면
콤보박스 클릭
콤보박스 출력
기
정상적으로 서버페이지를 통하여
응답받은 JSON OBJECT데이터가 목록에 출력되었습니다.
다음 포스팅은 마우스우클릭을 이용한 context menu 컴포넌트를 알아보도록 하겠습니다.
by 개발로짜
ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기 (10) | 2014.11.03 |
---|---|
ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자 (0) | 2014.11.03 |
ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기 (0) | 2014.10.30 |
ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법 (0) | 2014.10.28 |
ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함) (17) | 2014.10.28 |