오랫만에 ExtJS에 관련한 포스팅을 하게 되었습니다.

    요즘 프로젝트 기간이 타이트하게 진행되다보니, 포스팅을 못하고 있네요..



    ExtJS 6 가 출시되면서, ExtJS 5 에 대해서 포스팅을 계속 해야되는지 고민을 했었습니다.

    하지만, 문법은 거의 흡사하므로, ExtJS 5에 대해서 포스팅을 계속 진행하기로 결정하였습니다.

    ExtJS 6 가 정식적으로 나왔지만, 이전버전과 동일한 문법으로 진행이 되는거 같습니다.

    본인 역시, 아직 ExtJS 6를 파악해보지는 못했으나, 조만간 ExtJS 기초강좌 포스팅을 마무리하고, 천천히 훑어보도록 해야겠습니다.


    이번 강좌는 Ajax 클래스를 이용한 비동기 호출을 진행해보도록 하겠습니다.


    Question

    ExtJS는 항상 비동기 호출방식으로 데이터를 가공했던거 아니였나요?


    Answer

    그렇습니다. 

    ExtJS는 컴포넌트 내부의 데이터들을 호출하는 방식이 모두 비동기 방식으로 데이터들을 호출해왔습니다. Ajax 클래스는 필요없다(?)

    간혹가다 그리드/트리내에 데이터를 출력할때 데이터스토어를 이용하여 ajax call을 하지 않고 어떠한 특정상황이 존재 할 수 있습니다.

    그럴 때 Ext.Ajax 클래스를 이용할 수도 있습니다.

    예를 들어, 그리드의 데이터스토어는 insert/update/delete 를 각각 따로 진행을 하게 됩니다.

    하지만, DB 트랜잭션을 고려하여 일괄로 처리하고자 할 경우에 Ext.Ajax 클래스를 이용하여 일괄로 처리를 할 수있습니다.

    이후 예제따라하기 편에서 다루도록 하겠습니다.


    기존에 jQuery의 "$.ajax" 와 비교를하여 문법을 다루도록 하겠습니다.

    문법을 익히고자 하는 목적으로, ExtJS의 컴포넌트를 사용하지 않고 단순히 HTML페이지에 데이터를 뿌려보도록 하겠습니다.


    Mission - 비동기통신으로 넘겨준 입력값과 HELLO WORLD를 body 태그에 출력하기


    제일먼저, jQuery를 이용한 HTML 페이지는 아래와 같습니다.


    jQuery HTML 샘플코드

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$.ajax({
    		url : './server_helloworld_response.jsp',
    		method : 'POST',
    		dataType : 'json',
    		data : {param1 : '입력값1', param2 : '입력값2'},
    		success : function(response) {
                            $("#div1").html(response.result);
    			$("#div2").html(response.param1);
    			$("#div3").html(response.param2);
    		}
    	})
    })
    </script>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>
    </body>
    </html>
    
    

    서버페이지 샘플코드

    
    	JSONObject jsonObject = new JSONObject();
    	
    	jsonObject.put("param1", request.getParameter("param1"));
    	jsonObject.put("param2", request.getParameter("param2"));
    	jsonObject.put("result", "<h1>HELLO WORLD</h1>");
    	
    	response.setContentType("text/plain; charset=UTF-8");
    	PrintWriter pw = response.getWriter();
    	pw.print(jsonObject);
    	pw.flush();
    	pw.close();
    
    


    실행결과




    설명

    제일먼저, HTML코드에 기술되어있는 코드에 대해서 설명을 드리겠습니다.

    JQuery를 사용해보셨던 분들이시라면 이해하시기 쉬운 코드이실 겁니다.

    body 태그안에 div 태그들을 3개 기술하였고, 모든 HTML페이지가 LOAD 된 이후에, Ajax call을 진행했습니다.


    ajax 의 각 속성은 아래와 같습니다.

    url - 비동기 호출할 URL이며, FORM 태그의 action에 해당되는 속성

    method - POST / GET / PUT 방식을 이이용할 수 있으며, FORM 태그의 method에 해당되는 속성

    dataType : 'text/script/xml/json/html' 방식등이 있는데, 응답받는 결과값에 대한 유형을 정의하는 속성 

    (설정을 하지 않을 시, HTML이 기본값이다)

    data : 서버페이지에 전송하고자 하는 입력값들 

    success : 성공 시, 서버페이지로부터 응답받은 결과값을 처리하는 부분

    JSON 으로 응답받은 key값들을 이용하여 각각의 DIV 태그내에 응답받은 결과값을 삽입해주었음.


    이어서 서버페이지 부분을 보도록 하겠습니다.


    서버페이지에서는 

    param1 / param2 / result 라는 JSON Key로 HTML페이지로부터 받은 입력값들과 별도의 "HELLO WORLD" html 코드를 담아서 응답을 주었습니다.


    동일한 결과를 ExtJS의 Ajax 클래스를 이용하여 작성해보도록 하겠습니다.

    서버페이지는 동일하게 가고, 클라이언트 페이지의 자바스크립트 부분만 변경하도록 하겠습니다.


    ExtJS 샘플코드

    
    Ext.onReady(function(){
    	Ext.Ajax.request({
    		url : './server_helloworld_response.jsp',
    		method : 'POST',
    		params : {param1 : '입력값1', param2 : '입력값2'},
    		success : function(response) {
    			var data = Ext.JSON.decode(response.responseText);
    			Ext.get("div1").update(data.result);
    			Ext.get("div2").update(data.param1);
    			Ext.get("div3").update(data.param2);
    		}
    	})
    })
    
    


    위와 같이 작성을 하고 실행을 시켜보면, jQuery의 $.ajax 통신을 한 결과와 동일한 화면을 출력시킬 것입니다.


    Ext.Ajax 클래스의 config는 대략적으로 이해를 하실거라 생각하고,

    success 내에 정의된 몇가지에 대해서만 설명을 드리도록 하겠습니다. ▼

    Ext.JSON.decode - jQuery의 경우 별도의 decode 작업이 필요없지만, Ext.Ajax를 이용할 경우, 

    디코드 작업이 필요합니다.

    Ext.get("아이디").update() - 지정해준 아이디값의 영역내의 HTML 태그를 삽입해주기 위해서

    update 메서드를 이용합니다.


    jQuery의 ajax 와 거의 동일하므로 자세한 설명이 필요하지 않다 생각되어 이번 강좌는 여기서 마무리를 짓도록 하겠습니다.

    다음장부터는 ExtJS에서 제공되는 다양한 차트들에 대해서 알아보도록 하겠습니다.




    신고
    Posted by 몽고
    • 정웅식
      2017.02.22 17:18 신고

      ExtJS 입문자입니다. 좋은 강의와 자료 덕분에 무럭 무럭 배우고 있습니다.
      프로젝트 검토 단계에서 ExtJS를 적극적으로 검토하고 있습니다.
      서버에서 수신받은 N개(페이지당100여개)의 아날로그값을 각각의 displayfield에 0.5초 간격으로 갱신/표시 해 주어야 하는데, 노가다를 최소화할 binding 방법을 찾고 있습니다.
      바쁘시겠지만 조언이나 관련 강좌를 염치불구하고 부탁 드립니다.
      항상 감사드립니다. 꾸벅!

      • BlogIcon 몽고
        2017.02.22 17:23 신고

        우선 제가 궁금한점은,
        1. 그리드에 100여개의 데이터를 출력시키려고 하시는지
        2. 폴링방식으로 진행을 해서 refresh를 특정 시간마다 시켜준다는것인지
        3. 페이징처리를 bufferedstore를 이용해서 스크롤 리스트를 의미하시는건지..

        이부분에 답변이 필요할거 같습니다 ^^

    • 정웅식
      2017.02.24 15:13 신고

      관심 가져주셔서 대단히 감사드립니다.
      1. 그리드에 100여개의 데이터를 출력
      - 그리드에 출력하지 않습니다.
      - 각각의 데이터가 출력되는 콤포넌트는 상이합니다. 어떤것은 displayfield, 어떤것을 text field, 또 어떤것은 램프와 같은 digitial 형태로 표시될 예정입니다.
      2. 페이지가 로딩될 때 폴링을 시작하고, 페이지가 unloading될 때 폴링을 중단할 계획입니다.
      3. 그리드가 아니니 bufferdstore도 아니고, 스크롤 리스트도 아닙니다. 각각의 계측 데이터는 다양한 형태로 표시될 수 있습니다.
      다시한번 관심에 감사드립니다. 복 받으실겁니다.

      • BlogIcon 몽고
        2017.02.24 15:27 신고

        아마 폼필드의 데이터들을 100개의 입력양식에 출력시키고자 하신다고 하시는 의미같습니다.
        그런 데이터의 경우, 각각의 폼필드에 setValue 로 set을 하는방법 말고 뷰모델에 bind 시켜서 해당 받은 데이터를 일괄로 넣어주게끔 하는 방식이 효과적일거 같습니다.

        대신, 갱신속도에 대한 부분이 염려되네요 ^^;;

    • 정웅식
      2017.02.24 15:33 신고

      네. 맞습니다.
      받은 데이터를 일괄로 뷰모델에 bind하는 방법, 바로 그 방법을 찾고 있습니다.
      염치불구하고 계속 여쭤봅니다. 감사합니다.

      • BlogIcon 몽고
        2017.02.24 15:42 신고

        현재 근무중이라 바로 대답은 힘들거 같고요~
        이따 퇴근해서 집에서 샘플링해서
        하단 youtube Q&A 샘플링에 올려드리도록 하겠습니다.
        맞는 결과인지는 확답은 못드리겠지만,
        말씀하신대로 바인딩관련 샘플링에 대해서 영상 올려드릴테니, 내일 이후에 YOUTUBE 채널 방문하셔서 확인해보시면 되실거 같습니다 ^^

        링크가 안걸리는관계로
        채널주소는 동영상강좌 메뉴에 보시면
        youtube 채널 URL이 존재하는데 YOUTUBE 앱으로 구독해주시면 실시간으로 영상업로드에 대해서 받아보실수 있으실거예요~

    • 정웅식
      2017.02.24 15:44 신고

      꾸벅^^ 감사합니다.

      • BlogIcon 몽고
        2017.02.25 00:06 신고

        https://youtu.be/fA8ip6wRDsE

        질문줏니 내용에 대한 샘플링 답변링크입니다.

    • 정웅식
      2017.02.27 15:09 신고

      늦은 시간까지 샘플을 제작 해 주셨더군요.
      그 열정과 친절함에 진심으로 감사의 인사 드립니다.
      너무 감사드립니다. 꾸벅!

      • BlogIcon 몽고
        2017.02.27 15:11 신고

        원하시던 답변에 근접한 내용이면 좋겠네요.. ㅎ