곰팅이의 열정

http://demo.script.aculo.us/shop

공부 해볼 것들

먼저 json방식의 자료를 만들어야겠다.

array일 경우
var Beatles = ["Paul","John","George","Ringo"];
var Beatles = new Array("Paul","John","George","Ringo");

Object일 경우
var Beatles = {
     "Country" : "England",
     "YearFormed" : 1959,
     "Style" : "Rock'n'Roll"
}

아래의 경우는 위와 동일함
var Beatles = new Object();
Beatles.Country = "England";
Beatles.YearFormed = 1959;
Beatles.Style = "Rock'n'Roll";

Object 출력
alert(Beatles.Style); //Dot Notation
alert(Beatles["Style"]); //Bracket Notation


Array를 Object에 사용할 경우
var Beatles = {
     "Country" : "England",
     "YearFormed" : 1959,
     "Style" : "Rock'n'Roll",
     "Members" : ["Paul","John","George","Ringo"]
}


Array내부에 Object사용
var Rockbands = [
     {
         "Name" : "Beatles",
         "Country" : "England",
         "YearFormed" : 1959,
         "Style" : "Rock'n'Roll",
         "Members" : ["Paul","John","George","Ringo"]
     },
    {
        "Name" : "Rolling Stones",
        "Country" : "England",
        "YearFormed" : 1962,
        "Style" : "Rock'n'Roll",
         "Members" : ["Mick","Keith","Charlie","Bill"]
      }
]

Json Syntax
Javascript Object 와 흡사함

{
"Name" : "Beatles",
"Country" : "England",
"YearFormed" : 1959,
"Style" : "Rock'n'Roll",
"Members" : ["Paul","John","George","Ringo"]
}

내가 원하는것은 만들어진 Json을 어떻게 Ajax를 사용해 전송 할 것인가? 하는 것이다.
그 전에 Json Parser란게 필요하다.
사실 eval( ) 을 사용해서 parsing을 하고 있었는데 parser를 쓰면 더 좋단다. 흠흠..

http://www.json.org/json.js

JSON.parse(strJSON) - converts a JSON string into a JavaScript object.

JSON.stringify(objJSON) - converts a JavaScript object into a JSON string.

순서는 다음과 같다.
Client Side
1. Json을 만든다.
2. Json파서를 사용해 stringify() 작업을 한다. 이건 object를 string으로 만들어 버리겠다는것?
3. Send the URL-encoded JSON string to the server as part of the HTTP Request

Sample:

var objJSON = {
   "msg" : MSG
  };
  var strJSON = encodeURIComponent(JSON.stringify(objJSON));
  new Ajax.Request("ReceiveJSON.jsp",
   {
    method: "post",
    parameters: "strJSON=" + strJSON,
    onComplete: Respond
   });

Server Side(php)
strJSON 파라미터를 받아서 json_decode() 하게 되면 array의 형식으로 변경됨.
알아서 작업하면 됨....

-------------------------
헌데 분명
Content_Type     => 'application/json',
Content              => $json_req,
의 방법을 이용한 경우가 있는데 이럴때는 서버측에서 어떻게 해야 하나?





 

var params = {}
                params['template'] = "EG00";
                params['action']   = "get_list";

                // param parameters
                // str_query
                params = build_params( "#mail_menu .search_form", params );

                $.get("function.htm",  params,  
                        function(data){    
                                // $("#menu_list").html( data );
                                $("#menu_list").html( $("#list", data).html() );
                                $("#msg").fadeOut();
                        }
                );

모 이런 식으로 하고 있음

샘플 사이트
http://3pl.ezadmin.co.kr/extjs/grid_test_json2.html

구성을 보자..
1. 먼저 라이브러리들을 가져와야 한다.

<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/grid-examples.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/examples/examples.css" />

<!-- script -->
<script type="text/javascript" src="/js/ext-2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-2.0.2/ext-all.js"></script>

2. store객체를 만든다.
store객체는 Grid에 출력할 데이터를 가져오는 역할을 수행한다.
여기서는 json방식을 사용할 것이다.
 json은 모 테스트라 간단히 json_encode를 사용해서 만들었다.

$_val = array();
  $_val[totalCount] = 40;
  $_val[data][] = array( id => 1, title=> iconv( 'CP949','UTF-8','하하하'));
  $_val[data][] = array( id => 2, title=> iconv( 'CP949','UTF-8','2 jacking') );
  $_val[data][] = array( id => 3, title=> iconv( 'CP949','UTF-8','3 jacking 흠흠 123') );

echo json_encode ( $_val );

json을 가져오기 위해 메뉴얼에서는 jsonStore를 사용하라고 했지만 아무리 해도 안된다. 개구라가 아닌가 싶다. 모르지 공력이 쌓이면 될런지..일단은 Ext.data.Store 를 사용했다.

var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy(
                   new Ext.data.Connection({
                        url: './json_data.php',
                        extraParams: params,
                        method: 'POST'
                })),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalCount',
            root: "data",
            fields: ['id', 'title']
        })
    });

흠..다 날려 먹었다.

proxy:
Ext.data.HttpProxy는 외부의 데이터를 연동할 때 사용한다.
Ext.data.Connection은 파라미터를 전송하기 위해 사용함
Grid에서 footer를 사용할 경우 starter, limit은 기본 parameter롤 전송된다.

reader:
Ext.data.JsonReader 를 사용한다, 서버로 부터 받는 데이터가 Json방식일 경우 사용한다.
totalProperty: jSon방식의 값에서 Total 파라미터를 보낼 경우 정의 이 값은 나중에 footer와 자동연동된다.
root: 데이터들의 root 엘리먼트라고 하면 될까?
field: [] 다음과 같은 방식으로 저장되어 있다라고 포맷을 알려 줌 향후 값, 포맷의 설정이 가능함

3. Grid 생성 부분

///////////////////////////////////////////////////////////
    // grid 생성 부분
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: 'id', width: 120, sortable: true, dataIndex: 'id'},
            {header: 'title', width: 190, sortable: true, dataIndex: 'title'}
        ],
        viewConfig: {
            forceFit: true
        },
        renderTo: 'div_grid',
        title: '그리드',
        width: 500,
        height: 500,
        loadMask: true,
        frame: false,
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: store,
            displayInfo: true,
            displayMsg: '총계 {2}중 {0} - {1}',
            emptyMsg: "조회값이 없습니다."
        })
    });

4. data 로드
     store.load();

5. html 소스 부분

</head>
<body>
<h1>XML Grid 테스트</h1>
<div id="div_grid"></div>
</body>
</html>

select box의 내용 가져오기
$("#select_box > option:selected").val();

select box의 값 설정
 $("#select_box > option[@value=지정값]").attr("selected", "true")

<select id="cnt_type">
    <option value=1>1</option>
</select>



<script>
/////////////////////////////////////////
// case 1: 노가다
$("#cnt_type")
            .find("option[@selected]")
            .each(
            function(){
                alert ( this.value );
        })

/////////////////////////////////////////
// case 2: jQuery context 사용
alert ( $("#cnt_type > option:selected").val() );
</script>