[ExtJS강좌11] 폼을 화면에 출력하기 (2) - 콤보박스2 ajax

이번시간에는 ajax 통신으로 콤보박스에 option 리스트를 담아보도록 하겠슴돠..

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

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

이번에는 지난 시간 소스를 변경하여 ajax 타입으로 별도 URL에서 json을 생성후 받아서 combobox의 option list를 출력해보도록 하겠다.

지난소스관련해서는 다음 링크를 참고하시길...

2014/06/24 - [자바스크립트이야기/Ext JS] - [ExtJS강좌10] 폼을 화면에 출력하기 (2) - 콤보박스1

ajax로 json을 파싱하기 위해서는 Grid에서 ajax로 서버호출하여 json을 받아온 jsp 링크페이지를 참고하고 연동을 하자

2014/06/23 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 7]그리드패널 - 두번째 편 ajax type!!

그리드패널에서 ajax으로 호출한 jsp 페이지의 json 파싱하는 로직은 같고 

다만 다른점이 있다면 json object의 key값을 name/value라고만 변경하였다.

json-simple 라이브러리를 사용한것도 그대로고  서버에서 json 넘겨주는 페이지의 로직은 모두 

같다!

이제 서버 호출용 json 파싱하는 jsp 페이지는 만들어 주었으니 html소스일부를 수정해보자

원래의 comboData변수는 필요가 없다! 과감히 삭제!!

store에서의 data  : comboData역시 필요 없다 삭제!!

대신~ proxy라는 걸 이용하여 ajax 호출관련 코드를 삽입하자

그럼 store부분은 다음과 같이 코드가 짜여질 것이다.

 //json 배열객체
	   var combostore = Ext.create('Ext.data.Store', {
	 	     //comboData의 key/value 구분
	 	    fields: ['name','value'],
		    //key/value값이 들어간 comboData 변수가 목록이 된다.
		    proxy: {
		    	//ajax type
	            type: 'ajax',
	            // 호출 URL
	            url: '/comboResult.jsp',
	            //목록 조회시 서버로부터 넘어오는 json read
	            reader: {
	            	// return type 지정
	                type: 'json',
	                // root json key값
	                root: 'item'
	            }
	        }
  })

아참! 그리고 콤보박스 수정중, value : 'value1', <<< 이놈도 지워버리자!!

최초 호출시 comboData 변수로 처리했을때와 다르게 combobx 초창기 값은 빈값으로만 나와있을 것이다. 뭐이곳에 값을 넣을 선택여부는 다음에 생각나면 포스팅 하겠음!!

실행을 해보자~~

1. 최초 load된  화면

2. select 클릭시 aajx 호출하려는 loading bar

3, ajax 호출은 지정된 key/value형식에 따른 json data list

4. select box option에 마우스 오버하여 focus 이동된 상태

5. option 값 select!!

콤보박스 ajax 호출 끝~ 

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