'웹개발강좌/ExtJS' 카테고리의 글 목록 (6 Page) IT Code Storage

/68

2014. 11. 3. 14:00

ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자

지난 시간, 콤보박스를 이용하여 간단하게 데이터스토어에 대한 개념을 익혀보았습니다.

store에 대하여 이해 하셨다면 그리드의 리스트 출력 역시 쉽게 접근하실 수 있겠습니다.

그리드 + 데이터스토어를 이용하여

그리드패널에 리스트출력을 위한 기본적인 구조는 다음과 같습니다.

그리드패널 + 데이터스토어 기본구조

이전 콤보박스리스트를 표출하기 위해서

combobox 2가지(displayField/valueField) 속성에 매칭을 시켜주었는데

2014/10/30 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기

그리드의 경우, columns->dataIndex속성값과 매칭을 시켜주시면 되겠습니다.

샘플 코드를 한번 작성해보도록 하겠습니다.

STORE PROXY 타입이 'MEMORY'를 이용한 그리드 코드

Ext.onReady(function(){
    Ext.create("Ext.grid.Panel",{
        renderTo : Ext.getBody(),
        title : '그리드 샘플화면',
        width : 500,
        height : 300,
        columns : [{
            text : '블로거아이디',
            flex : 1,
            dataIndex : 'blogger_id'
        },{
            text : '블로거닉네임',
            flex : 1,
            dataIndex : 'blogger_name'
        },{
            text : '블로그주소',
            flex : 1,
            dataIndex : 'blogger_url'
        }],
        store : Ext.create("Ext.data.Store",{ 
                    //data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
                    fields : ['blogger_id','blogger_name','blogger_url'],
                    data : [{
                        blogger_id : 'guklife',
                        blogger_name : '국이',
                        blogger_url : 'guklife.tistory.com'
                    },{
                        blogger_id : 'hellogk',
                        blogger_name : '개발로짜',
                        blogger_url : 'hellogk.tistory.com'
                    }],
                    proxy : {
                        //ajax 비동기 방식을 이용
                        type : 'memory'
                    }
                })
    })
})

샘플코드 실행결과

정상적으로 그리드내에 목록이

출력이 되는것을 확인 할 수 있었습니다.

콤보박스의 경우 2개의 속성으로 제어할수 있는반면,

그리드의 경우는 지정된 columns->dataIndex 속성의 수에따라

지정하는 갯수만큼 여러개의 key지정이 가능합니다.

이어서 위 코드를 약간 변경하여

proxy가 'ajax'인 방식으로

목록출력 하는 샘플을 확인해 보도록 하겠습니다.

서버페이지측 사용라이브러리는 json-simple라이브러리를 사용하였으나

본인의 환경에 맞추어 일부 변경을 하시면 되겠습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

STORE PROXY 타입이 'AJAX'를 이용한 그리드 코드(화면코드)

Ext.onReady(function(){
    Ext.create("Ext.grid.Panel",{
        renderTo : Ext.getBody(),
        title : '그리드 ajax 샘플화면',
        width : 500,
        height : 300,
        columns : [{
            text : '블로거아이디',
            flex : 1,
            dataIndex : 'blogger_id'
        },{
            text : '블로거닉네임',
            flex : 1,
            dataIndex : 'blogger_name'
        },{
            text : '블로그주소',
            flex : 1,
            dataIndex : 'blogger_url'
        }],
        store : Ext.create("Ext.data.Store",{
                    autoLoad : true,
                    //data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
                    fields : ['blogger_id','blogger_name','blogger_url'],
                    proxy : {
                        //ajax 방식
                        type : 'ajax',
                        api : {
                            //read - 응답데이터를 받아서 화면에 출력시킬경우
                            read : '/grid_res.jsp'
                        },
                        //api->read 속성의 url값으로 부터 응답받은 object값을 받기 위한 속성
                        reader : {
                            type : 'json',
                            successProperty : "success",
                            rootProperty : 'grid_item'
                        }
                    }
                })
    })
})

위 코드의 데이터 스토어 부분 코드를 보면 autoLoad속성이 존재합니다.

이벤트(예를들어 버튼 클릭등) 를 발생하지 않고

바로 화면에 출력 시켜주고자 한다면

autoLoad 속성을 true로 지정해주셔야 합니다.

만약, 지정을 안하거나 이 옵션을 추가하지 않으셨다면

그리드의 컬럼만 나오는 빈 껍데기만 화면에 출력이 되시는걸 확인 하실 수 있습니다.

STORE PROXY 타입이 'AJAX'를 이용한 그리드 코드(서버코드 - grid_res.jsp)

JSONArray jsonArray = new JSONArray();
JSONObject jsonGridRootObject = new JSONObject();
JSONObject jsonGridObject = null;
 
jsonGridObject = new JSONObject();
jsonGridObject.put("blogger_id", "guklife");
jsonGridObject.put("blogger_name", "국이");
jsonGridObject.put("blogger_url", "guklife.tistory.com");
jsonArray.add(jsonGridObject);
 
jsonGridObject = new JSONObject();
jsonGridObject.put("blogger_id", "hellogk");
jsonGridObject.put("blogger_name", "개발로짜");
jsonGridObject.put("blogger_url", "hellogk.tistory.com");
jsonArray.add(jsonGridObject);
 
jsonGridRootObject.put("success", true);
jsonGridRootObject.put("grid_item", jsonArray);
response.setContentType("text/plain; charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.print(jsonGridRootObject);
pw.flush();
pw.close();

샘플코드 실행결과

ajax Call의 경우는 LoadMask가 출력이 되면서

데이터가 출력이 되는 것을 확인 할 수 있습니다.

콤보박스에서 데이터스토어 개념을 잡으시고 진행하셨다면,

그리드 목록 출력정도는 쉽제 접근 하셨을거라 생각합니다.

다음 포스팅은 그리드패널에 페이징툴바를 붙여서

그리드 목록의 페이징 처리를 알아보도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS의 그리드패널 reconfigure함수를 적용하여 컬럼 및 데이터 재설정하기 (0)	2014.11.05
ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기 (10)	2014.11.03
ExtJS 강좌 - 데이터스토어(store)의 proxy ajax를 통하여 콤보박스 목록 출력시켜보기 (0)	2014.10.30
ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기 (0)	2014.10.30
ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법 (0)	2014.10.28

IT Code Storage 개발로짜의 코드저장소입니다

/67

2014. 10. 30. 17:30

ExtJS 강좌 - 데이터스토어(store)의 proxy ajax를 통하여 콤보박스 목록 출력시켜보기

지난 시간에 데이터스토어의 개념을 이해하기위하여

프록시타입을 memory로 주어 간단하게

콤보박스 컴포넌트에 목록을 구현해보았습니다.

이번에는 프록시타입이 ajax에 대하여 다루어보도록 하겠습니다.

우선 컴포넌트 + 데이터스토어 + remote페이지의 request/response 구조는 다음과 같습니다.

콤보박스 컴포넌트에서 데이터 스토어를 정한다음

proxy 타입을 ajax로 설정을 해준다음 지정해놓은 서버페이지를 통신하여

json object 데이터를 response하게 됩니다.

그럼 응답받은 데이터들은 지난 시간에 했던

store의 data 속성값에 들어간다고 생각하시면 되겠습니다.

※ 참고로 응답받을수 있는 데이터는 JSON,XML,ARRAY가 있습니다.

저는 항상 JSON 방식으로 RESPONSE 받도록 하겠습니다.

2014/10/30 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기

위 포스팅의 콤보박스 예제코드를 응용하여

데이터스토어의 "ajax call"에 대한 예를 들어보도록 하겠습니다.

서버페이지에서 json object를 response 해주기 위해서

json-simple 라이브러리를 사용하겠습니다.

하단 포스팅을 참고하셔서 json-simple jar파일을 라이브러리 폴더에 include 해놓습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

데이터스토어의 비동기 호출을 사용한 콤보박스 샘플코드

Ext.onReady(function(){
    Ext.create('Ext.panel.Panel',{
        renderTo : Ext.getBody(),
        width : 300,
        height : 300,
        title : '콤보박스예제코드',
        items : [{
            //콤보박스 컴포넌트 선언
            xtype : 'combo',
            //최초에는 빈값이 출력되므로 설정
            emptyText : '선택',
            //화면에 보여주는 store data속성의 key값
            displayField: 'option_text',
            //실제 선택되었을때의 store data속성의 key값
            valueField: 'option_value',
            //default true값이여서 화면에 보여지는 displayField값 수정이 됩니다.
            //false로 지정해줘야 제대로된 콤보박스기능이 동작됩니다.
            editable : false,
            //데이터 스토어 사용
            store : Ext.create("Ext.data.Store",{
                        //data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
                        fields : ['option_text','option_value'],
                        proxy : {
                            //ajax 비동기 방식을 이용
                            type : 'ajax',
                            api : {
                                //read 속성을 response 데이터를 받을경우 사용합니다.
                                //db의 select 쿼리의결과를 받을 경우
                                read : '/response.jsp'
                            },
                            //api->read 속성의 url값으로 부터 응답받은 object값을 받기 위한 속성
                            reader : {
                                type : 'json',
                                successProperty : "success",
                                rootProperty : 'items'
                            }
                        }
                    })
        }]
    })
})

이전코드와 다른점이 있다면 proxy 내에 설정한 코드일부가 다를겁니다.

type 이 'memory' -> 'ajax'로 변경이 되었으며

ajax call을 위한 api,reader 속성값들이 정의 되어있습니다.

데이터스토어의 api 속성에는 create/upload/destroy 속성이 존재하나

스토어의 crud에 대해서는 그리드패널 주제로 포스팅할 때 다루도록 하겠습니다.

그리고 api -> read 속성을 정의 하였는데 이 read 속성이 정의를 하면

reader 속성도 같이 함께 정의 해주어야 합니다.

read/reader는 한묶음으로써

1+1 이라고 이해하시면 되겠습니다.

reader 내에 정의된 type/successProperty/rootProperty 속성이 존재하는데

type의 경우는 서버페이지로부터 response 받은 데이터타입을 의미합니다.

type은 xml/array/json 등을 지원하지만 json을 주로 사용을 합니다.

successProperty 속성은 정의하지 않아도 무관하나

만약 어떤 경우에는 목록이 보여야하고

반대로 어느경우에는 목록이 보여서는 안되는 케이스가 존재할때

이 successProperty 속성을 정의 해줍니다.

default key가 "success"로 정의 되어있고

value 는 true/false로 정해주시면 되겠습니다.

그리고 rootProperty속성은 중요한 속성입니다.

바로 response object의 root key값을 정의해주는 것인대

지난 포스팅에 memory 타입시 콤보박스 목록을 출력하기 위해

store의 data 속성에 임시 데이터들을 정의한적이 있습니다.

이 data 속성의 기능과 동일하게 동작시켜주기 위한 속성값이

바로 rootProperty속성입니다.

※ 꼭 기억해두도록 합니다.

데이터스토어에서 RESPONSE 결과값을 받을 샘플 코드(response.jsp)

JSONArray jsonArray = new JSONArray();
JSONObject jsonObject = new JSONObject();
JSONObject jsonObjectSub = null;
 
jsonObjectSub = new JSONObject();
jsonObjectSub.put("option_text", "보여주는값1");
jsonObjectSub.put("option_value", "선택값1");
jsonArray.add(jsonObjectSub);
 
jsonObjectSub = new JSONObject();
jsonObjectSub.put("option_text", "보여주는값2");
jsonObjectSub.put("option_value", "선택값2");
jsonArray.add(jsonObjectSub);
 
jsonObjectSub = new JSONObject();
jsonObjectSub.put("option_text", "보여주는값3");
jsonObjectSub.put("option_value", "선택값3");
jsonArray.add(jsonObjectSub);
 
// successProperty 속성의 key값과 맞춰주며 true/false로 정해줍니다.
jsonObject.put("success", true);
// 최상단의 key값은 rootProperty 속성의 key로 정의해준값과 맞춰줍니다.
jsonObject.put("items", jsonArray);
response.setContentType("text/plain; charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.print(jsonObject);
pw.flush();
pw.close();

서버페이지내에 JSON OBJECT를 생성 후 클라이언트 페이지로 응답을 주었습니다.

응답데이터의 결과는 다음과 같겠습니다.

RESPONSE JSON DATA

         
items : [{
        "option_text" : "보여주는값1",
        "option_value" : "선택값1"
    },{
        "option_text" : "보여주는값2",
        "option_value" : "선택값2"
    },{
        "option_text" : "보여주는값3",
        "option_value" : "선택값3"
    }
]

json object 를 store에서 callback으로 받았습니다.

단, 콤보박스 목록을 출력시키기위한 버튼클릭시

로딩바가 출력되면서 콤보박스내 목록이 출력될것입니다.

그이유는 store의 autoLoad라는 속성이 존재하는데

지정을 해주지 않았기 때문에

이벤트 발생시 store가 load되는 것입니다.

만약 이벤트 없이 미리 store에 담아놓고 싶으실경우

store속성에 autoLoad : true 라는 설정을 추가로 잡아주시면 되겠습니다.

실행결과를 보시도록 하겠습니다.

초기화면

콤보박스 클릭

콤보박스 출력

기

정상적으로 서버페이지를 통하여

응답받은 JSON OBJECT데이터가 목록에 출력되었습니다.

다음 포스팅은 마우스우클릭을 이용한 context menu 컴포넌트를 알아보도록 하겠습니다.

Bye

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기 (10)	2014.11.03
ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자 (0)	2014.11.03
ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기 (0)	2014.10.30
ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법 (0)	2014.10.28
ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함) (17)	2014.10.28

IT Code Storage 개발로짜의 코드저장소입니다

/66

2014. 10. 30. 00:22

ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기

ExtJS에서 스토어는 상당히 자주 사용되는 ExtJS 클래스입니다.

앞으로 girdpanel,treepanel,combo 등...

다양한 컴포넌트에 store 클래스를 사용하게 되므로

이번 포스팅을 통하여 스토어 개념을 잡아보도록 하겠습니다.

가장 심플하게 구현이 가능한 콤보박스 컴포넌트를 예를들어 이해를 돕도록 하겠습니다.

STORE 클래스란?

데이터들을 담아주는 역할을 하는 클래스입니다.

HTML태그로 예를들자면 SELECT BOX에 목록을 출력시켜주려면 OPTION 태그가 필요합니다.

<select>
<option value="1">첫번째값</option>
<option value="2">두번째값</option>
<option value="3">세번째값</option>
</select>

option이 있어야 화면에 key값이 출력되고 value값이 선택되면 서버전송이 가능한 기능을 해줍니다.

만약 option 태그가 없다면 select 태그는 그저 빈 껍데기에 불과하겠죠?

이 option 태그와 같은 역할을 하는 기능이 store 클래스입니다.

store클래스를 사용하여 콤보박스를 구현해보도록 하겠습니다.

STORE 클래스를 적용한 콤보박스 컴포넌트 스크립트 코드

Ext.onReady(function(){
    Ext.create('Ext.panel.Panel',{
        renderTo : Ext.getBody(),
        width : 300,
        height : 300,
        title : '콤보박스예제코드',
        items : [{
            //콤보박스 컴포넌트 선언
            xtype : 'combo',
            //최초에는 빈값이 출력되므로 설정
            emptyText : '선택',
            //화면에 보여주는 store data속성의 key값
            displayField: 'display',
            //실제 선택되었을때의 store data속성의 key값
            valueField: 'value',
            //default true값이여서 화면에 보여지는 displayField값 수정이 됩니다.
            //false로 지정해줘야 제대로된 콤보박스기능이 동작됩니다.
            editable : false,
            store : Ext.create("Ext.data.Store",{
                        //data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
                        fields : ['display','value'],
                        //저장공간에 fix값으로 data 속성에 json array type으로 담아줍니다.
                        data : [{
                            display : '보여주는화면1',
                            value : '선택값1',
                        },{
                            display : '보여주는화면2',
                            value : '선택값2',
                        },{
                            display : '보여주는화면3',
                            value : '선택값3',
                        },{
                            display : '보여주는화면4',
                            value : '선택값4',
                        },{
                            display : '보여주는화면5',
                            value : '선택값5',
                        }],
                        //data 속성에 fix값이 정의되있으므로 type을 memory로 정해줍니다.
                        proxy : {
                            type : 'memory'
                        }
                    })
        }]
    })
})

위 코드를 설명하자면 패널에 combo박스 컴포넌트를 생성(html 기준 select태그 생성)한 다음

store의 data 속성을 통하여 disply/value값(option 태그에 해당)을 선언해 주었습니다.

스토어 클래스에 fields의 key값을 data속성의 key값과 일치 시켜주어야 합니다.

fields 속성은 store의 model 속성에도 존재합니다.

fields 속성만을 사용해도 무관합니다.

간단하게나마 store 클래스의 fields 속성대신 model 속성을 적용해보도록 하겠습니다.

Ext.create("Ext.data.Store",{
        //data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
        model : Ext.create("Ext.data.Model",{
            fields: ['display','value']
        }),
        //저장공간에 fix값으로 data 속성에 json array type으로 담아줍니다.
        data : [{
            display : '보여주는화면1',
            value : '선택값1',
        },{
            display : '보여주는화면2',
            value : '선택값2',
        },{
            display : '보여주는화면3',
            value : '선택값3',
        },{
            display : '보여주는화면4',
            value : '선택값4',
        },{
            display : '보여주는화면5',
            value : '선택값5',
        }],
        //data 속성에 fix값이 정의되있으므로 type을 memory로 정해줍니다.
        proxy : {
            type : 'memory'
        }
})

실행화면 먼저 보고 설명을 진행하도록 하겠습니다.

콤보박스 초기화면

콤보박스 목록 OPEN

콤보박스 목록 선택

model 사용하는법이나 fields 사용하는 법이나 별 차이가 없습니다.

1회성으로 사용을 하여 model 속성에 직접적으로 create 해서 적용을 해주었습니다.

예를들어 콤보박스의 경우 보통 2개의 key/value fields 만 있으면 됩니다.

이럴경우, 계속 같은 fields인대 store 적용할때마다 create model을 해주어야 할까요?

그렇게 되면 같은코드도 반복되면서 소스자체가 길어지고 유지보수도 힘들어 지겠죠?

이럴경우 자주사용되는 model을 정의해놓은 후 만들어놓은 모델만 사용을 하게된다면 오히려 간결해지겠습니다.

나누는 부분에 대해서는 MVC구조에 대하여 포스팅때 진행하도록 하겠습니다.

MVC 구조로 나누게 되면 STORE 역시 정의하여 재활용이 가능합니다.

뭐... 우선은 "아 그렇구나~" 라는 정도만 알고계시라고요 ㅎㅎ

슬퍼2

이번 포스팅은 proxy type을 memory에대하여 설명하였는데

다음 장은 proxy type이 ajax에 대하여 포스팅 하도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자 (0)	2014.11.03
ExtJS 강좌 - 데이터스토어(store)의 proxy ajax를 통하여 콤보박스 목록 출력시켜보기 (0)	2014.10.30
ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법 (0)	2014.10.28
ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함) (17)	2014.10.28
ExtJS 강좌 - xtype을 이용하여 html의 입력태그들과 HTML에디터 컴포넌트를 출력시켜보자 (0)	2014.10.27

IT Code Storage 개발로짜의 코드저장소입니다

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자

ExtJS 강좌 - 데이터스토어(store)의 proxy ajax를 통하여 콤보박스 목록 출력시켜보기

ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기

그리드패널 + 데이터스토어 기본구조

STORE PROXY 타입이 'MEMORY'를 이용한 그리드 코드

샘플코드 실행결과

STORE PROXY 타입이 'AJAX'를 이용한 그리드 코드(화면코드)

STORE PROXY 타입이 'AJAX'를 이용한 그리드 코드(서버코드 - grid_res.jsp)

샘플코드 실행결과

'웹개발강좌 > ExtJS' 카테고리의 다른 글

데이터스토어의 비동기 호출을 사용한 콤보박스 샘플코드

데이터스토어에서 RESPONSE 결과값을 받을 샘플 코드(response.jsp)

RESPONSE JSON DATA

'웹개발강좌 > ExtJS' 카테고리의 다른 글

STORE 클래스란?

STORE 클래스를 적용한 콤보박스 컴포넌트 스크립트 코드

'웹개발강좌 > ExtJS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역