[Sencha&ExtJS] ExtJS 기초.12 - Ext.grid.Panel에 Ajax(JSON/XML)로 데이터 보여주기

Grid + AJAX(JSON) 만들기

Grid에 JSON포멧의 Ajax통신을 통한 데이터를 자져오는 처리에 대해서 만들어 본다.

data: config값을 proxy: config로 변경합니다.

autoLoad: true 또한 추가한다. 

(즉시 출력시 설정 / 특정 이벤트를 받은 다음에 데이터 출력을 위해서는 autoLoad: false로 지정)

proxy 속성: 통신 방식에 따라 여러가지 타입 지원

- type: 'memory' 서버 통신이 이루어지지 않을 경우 사용되는 타입

- type: 'ajax'  서버통신에서 응답을 받아 데이터를 로드하는 방식

- type: 'jsonp' 다른 도메인간의 Ajax통신을 하여 응답값을 주고 받을 때 사용되는 방식 / 전송시, callback parameter가 별도로 필요

- type: 'rest' RESTful방식의 CRUD처리를 할때 사용되는 방식

(이외 HTML5 기반의 localstorage / sessionstorage등이 존재함)

api 속성

- create / read / update / destroy 의 url 정보를 입력하는 config 

reader 속성: 서버 응답 또는 클라이언트로 부터 데이터를 읽을때 사용되는 config 

- type:'json' JSON 포멧의 데이터를 읽어 온다.

- type:'xml' XML 포멧의 데이터를 읽어 온다.

- rootProperty  응답 받을 JSON데이터의 목록이 들어있는 KEY값

- 이외 successPropert / totalProperty가 존재한다.

Grid 컬럼 

Ext.onReady(function(){

    Ext.create(

        'Ext.grid.Panel',

        {

            title: 'Grid Ajax DATA예제',

            columns : [ {text:'코드값', locked:true, dataIndex:'code'},{text:'회사명',dataIndex:'company'} ],

            store : Ext.create(

                'Ext.data.Store',

                {

                    fields: ['code','company'],//schema 역할

                    //data: [{code:'1-1',company:'1-2'},{code:'2-1',company:'2-2'}]

                    autoLoad: true,

                    proxy: { type:'ajax', api:{read:'/json/com_grp.php'}, reader:{type:'json', rootProperty:'data'} }

                }

            ),

            renderTo : Ext.getBody()

        }

    )

})

JSON 파일  ( /json/com_grp.php )

{

data: [{code:'A001',company:'Bank of America'},{code:'A002',company:'CHASH Bank'}]

}

Grid Ajax 

Grid + AJAX(XML) 만들기

Grid에 XML방식으로 통신한 예제

rootProperty:'data'  - 최상단 XML 태그명

record:'row' - 반복이 되는 데이터의 테그명을 입력

Grid 컬럼 

Ext.onReady(function(){

    Ext.create(

        'Ext.grid.Panel',

        {

            title: 'Grid Ajax DATA예제',

            columns : [ {text:'코드값', locked:true, dataIndex:'code'},{text:'회사명',dataIndex:'company'} ],

            store : Ext.create(

                'Ext.data.Store',

                {

                    fields: ['code','company'],//schema 역할

                    //data: [{code:'1-1',company:'1-2'},{code:'2-1',company:'2-2'}]

                    autoLoad: true,

                    //proxy: { type:'ajax', api:{read:'/json/com_grp.php'}, reader:{type:'json', rootProperty:'data'} }

                    proxy: { type:'ajax', api:{read:'/xml/com_grp.xml'}, reader:{type:'xml', rootProperty:'data', record:'row'} }

                }

            ),

            renderTo : Ext.getBody()

        }

    )

})

JSON 파일  ( /xml/com_grp.xml )

<?xml version="1.0" encoding="UTF-8"?>

<data>

    <row>

        <code>A001</code>

        <company>Bank of America</company>

    </row>

    <row>

        <code>A002</code>

        <company>CHASE Bank</company>

    </row>

</data>

Grid Click이벤트 처리하기

Grid에 Row을 클릭 events시 처리를 하려면 다음과 같이 하면 됩니다.

itemclick : 이벤트

리스너에 이벤트 처리 

( http://stackoverflow.com/questions/13795880/extjs-grid-click-event-listener )

Ext.onReady(function(){

    Ext.create(

        'Ext.grid.Panel',

        {

            title: 'Grid Ajax DATA예제',

            columns : [ {text:'코드값', locked:true, dataIndex:'code'},{text:'회사명',dataIndex:'company'} ],

            store : Ext.create(

                'Ext.data.Store',

                {

                    fields: ['code','company'],//schema 역할

                    //data: [{code:'1-1',company:'1-2'},{code:'2-1',company:'2-2'}]

                    autoLoad: true,

                    proxy: { type:'ajax', api:{read:'/json/com_grp.php'}, reader:{type:'json', rootProperty:'data'} }

                }

            ),

            listeners:

            {

                itemclick: function (dv, record, item, index, e) {

                    console.log(record.data['code']);

                    alert(record.data['code']);

                }

            },

            renderTo : Ext.getBody()

        }

    )

})

클릭시 처리되는 화면