json

/*

 

 Step 01

  - 메인 패널 생성하기.

  Ext.Ajax.request()

  - url : 서버 URL

  - success: Ajax통신이 성공했을때

  - failure :  Ajax통신이 실패했을대

  - callback : 실패/성공과 상관없이 Ajax통신이 끝났을때.

 

  - method : HTTP Method (POST,GET을 주로 사용);

 

  - params, jsonData, xmlData

 

 

 - 먼저 검색방식은 크게 id, css selector로 나뉨

- id 파라메터를 가지고 검색하는 함수들

fly(), get()

- css selector로 

select(), query() 등등..

- 결과값역시 dom node, Ext element로 나눔.

  즉, 원하는게 dom node인지 Ext Element인지 판단 후 관련있는 메소드를 호출 하면 됨.

- 리턴값이 dom node인 경우

   query() . . .

- element인 경우

fly(), select() ...

 */

Ext.setup({

onReady: function() 

{

objPanel=new Ext.Panel({

    fullscreen:true,

    scroll: 'vertical',

    dockedItems:[{

    dock:"top",

    xtype:"toolbar",

    title:"ajax test",

    items:[{

    text:"load",

    handler:function(){    

    sendData();

    }

    }]

    }]

    });

}

});

function sendData()

{

objPanel.setLoading(true);

Ext.Ajax.request({

        url: 'menulist.json',

        

        method:"POST",

        success: function(response, opts) {     

            objPanel.update(response.responseText);

            

            // XML 파싱

            parseData(response.responseText);

            

        },

failure: function(response, opts) {

  console.log("failure ", response.status);

},

callback:function(opts,isSuccess,response){

console.log("callback ", opts, isSuccess, response);

objPanel.setLoading(false);

}

    });

}

//7. 데이터 처리.

function parseData(strInfo)

{

// js DOM 방식.

var objJSON  = eval("("+strInfo+")");

console.log(objJSON);

console.log("메뉴 개수는? ", objJSON.menu_list.length);

//sencha 방식.

var objJSON2 =Ext.util.JSON.decode(strInfo)

console.log("메뉴 개수는? ", objJSON2.menu_list.length);

}


------------------------------------ menulist.json -------------------------------------------

{"menu_list":[

{"id":"id_0","out":"images\/menu_1.png","over":"images\/menu_1over.png"},

{"id":"id_1","out":"images\/menu_2.png","over":"images\/menu_2over.png"},

{"id":"id_2","out":"images\/menu_3.png","over":"images\/menu_3over.png"},

{"id":"id_3","out":"images\/menu_4.png","over":"images\/menu_4over.png"},

{"id":"id_4","out":"images\/menu_5.png","over":"images\/menu_5over.png"},

{"id":"id_5","out":"images\/menu_6.png","over":"images\/menu_6over.png"},

{"id":"id_6","out":"images\/menu_7.png","over":"images\/menu_7over.png"},

{"id":"id_7","out":"images\/menu_8.png","over":"images\/menu_8over.png"},

{"id":"id_8","out":"images\/menu_9.png","over":"images\/menu_9over.png"},

{"id":"id_9","out":"images\/menu_10.png","over":"images\/menu_10over.png"}

],

"success":"true"}