하이브리드 앱 센차터치 2.0 - 데이터 관리 : JsonP 객체

1. 개요

 

웹 어플리케이션에서 데이터를 요청할 때 주로 같은 도메인에 있는 파일을 호출한다. 그런데 상황에 따라서 도메인이 다르거나 서버가 다른 곳에 데이터를 요청해야 할 때가 있다. 이 때 주로 발생하는 문제가 바로 크로스 도메인 보안 문제이다. 센차터치에서는 이러한 보안 문제를 해결하기 위해 JsonP 객체를 지원한다. 특히 네이티브앱(하이브리드앱)에서 외부 데이터를 Json으로 받기 위해서 지원되는객체이다.

 

 

2. 구현

 

Ext.Loader.setConfig({enabled:true});

Ext.require("Ext.data.JsonP");
Ext.application({
    name:"JsonP",
    launch:function(){
        var eventHandler = function(btn,event){
            Ext.Viewport.setMasked({xtype:"loadmask",message:"Lodding!!!!!"});
            Ext.data.JsonP.request({
               url:"외부 도메인주소/senchaTouch2/data/jsondata.php",
                // 서버측으로 callback 파라미터 이름
                callbackKey:"callback",
                success:function(result){
                    Ext.Viewport.setMasked(false);
                    
                   displayMyList(result);
                },
                failure:function(result){
                     alert("Failure!");
                }
            });
        } 

        function displayMyList(listArray){
            listPanel.removeAll(true);
            // 서버에서 전송되어오는 Json데이터의 값이 배열값
            for(var i=0; i< listArray.length; i++){
                // 객체변수를 선언.
                var mylist = listArray[i];
                var no = mylist.no;
                var name = mylist.name;
                var img = mylist.image;
                var item ={
                    html:"<table style='border:1px solid gray; width:100%'>"+
                         "<tr><td style='width:20%; padding:5px; text-align:center'>"+no+"</td>"+
                         "<td style='width:40%; padding:5px; text-align:center'>"+name+"</td>"+
                         "<td style='width:40%; padding:5px; text-align:center'>"+
                         "<img src='"+img+"' width='80'/></td></tr></table>"
                }
                //리스트 패널에 배치
                listPanel.add(item);
            }
          
        }
        // toolBar를 생성
        var toolBar = Ext.create("Ext.Toolbar",{
            docked:"top",
            items:{ text:"JsonData", ui:"confirm",
                handler:eventHandler
            }
        });
        // 리스트패널을 생성
        var listPanel = Ext.create("Ext.Panel");
        var rPanel = Ext.create("Ext.Panel",{
             scrollable:true,
            items:[toolBar,listPanel]
        });
        Ext.Viewport.add(rPanel);
    }
});

 

//----- output file : jsondata.php

 

참고 : http://streammx.tistory.com/admin/entry/post/?id=70