가공된 데이터를 화면에 출력을 시켜주는 데이터스토어(Ext.data.Store) 에 대해서 알아보도록 하겠습니다.


    데이터스토어의 정의

    ● 스토어 클래스는 모델 객체의 클라이언트 측의 캐시를 캡슐화합니다. 

    스토어는 프록시를 경유하여 데이터를 로드하고 또 그 안에 포함되어 있는 모델·인스턴스를 정렬 필터링 및 조회하기 위한 기능을 제공합니다.

    스토어의 작성은 간단합니다.

    우리는 로드하고 그 데이터를 저장하는데 사용합니다.


    데이터 스토어는 여러 컴포넌트에서 사용이 되고 있습니다.


    대략적으로 Store 클래스의 사용처에 관하여 몇가지 예를 들 수 있겠습니다. ▼

    ◆ 콤보박스[Ext.form.field.ComboBox]

    ◆ 데이터뷰[Ext.view.View]

    ◆ 그리드[Ext.grid.Panel]

    ◆ 트리[Ext.tree.Panel]

    (스토어의 개념은 동일하나 사용되는 스토어 클래스가 다름 - Ext.data.TreeStore)

    ◆ 차트

    (Column/3D Column/Bar/3D Bar/Line/Area/Financial/Pie/Redial/Gauge/Combination...)


    아직 모든 컴포넌트를 접해보지는 않았지만, 대략 어떤 모양의 컴포넌트인줄은 아실거라 생각됩니다.

    그렇다면, 위의 예들 중에서 콤보박스 + 데이터 스토어를 이용하여 콤보박스 목록을 출력해보도록 하겠습니다.


    우선은 xtype으로 기본 콤보박스 컴포넌트를 생성해보도록 하겠습니다.

    ▶ 샘플코드

    
    Ext.onReady(function(){
    	Ext.create('Ext.Panel',{
    		title : 'Data Store Example',
    		items : [{
    			xtype : 'combo',
    			fieldLabel : 'ComboBox'
    		}],
    		renderTo : Ext.getBody()
    	})
    })
    
    

    ▶ 실행결과



    콤보박스 컴포넌트가 출력이 되었지만, 클릭했을때는 어떠한 목록도 출력되지 않습니다.

    store config 속성에 데이터 스토어 클래스를 적용해보도록 하겠습니다.


    ▶ 샘플코드

    
    Ext.onReady(function(){
    	Ext.create('Ext.Panel',{
    		title : 'Data Store Example',
    		items : [{
    			xtype : 'combo',
    			fieldLabel : 'ComboBox',
    			//추가
    			store : Ext.create('Ext.data.Store',{
    						fields : ['label','value'],
    						data : [
    							['label1','value1'],
    							['label2','value2'],
    							['label3','value3']
    						]
    					})
    		}],
    		renderTo : Ext.getBody()
    	});
    });
    
    


    위 처럼 코드를 작성했다면,  목록을 출력해 보겠습니다.


    ▶ 실행결과



    하단에 무언가 살짝 내려오긴 했으므로 스토어는 정상적으로 Load 된 것입니다.

    하지만 정의한 데이터 목록이 출력되지 않습니다.

    이유는 실제값에 대한 필드명/화면에 출력되어야 하는 필드명에 대하여 선언을 해주어야 합니다.

    select 태그의 option과 동일한 개념입니다.

    <option value="value">label</option> 코드를 보면, 화면에 출력되는 내용은 "label"이 되고 선택되어서 폼전송시 전달되는 값은 "value"가 될것 입니다.


    ExtJS의 콤보박스 컴포넌트 역시 다음 CONFIG 속성값을 선언해주시면 화면에 정상출력되는 것을 확인 할 수 있습니다.

    ◆ displayField 

    스토어에서 fields에 선언해준 여러 필드명 중 화면에 표출시키고자 하는 필드명

    ◆ valueField

    스토어에서 fields에 선언해준 여러 필드명 중 선택시 값전달을 하고자 하는 필드명


    그럼 화면 표출을 하고자 하는 필드명을 'label' 로 주고, 선택된 값에 대한 필드명을 'value'로 선언해보겠습니다.


    ▶ 샘플코드

    
    Ext.onReady(function(){
    	Ext.create('Ext.Panel',{
    		title : 'Data Store Example',
    		items : [{
    			xtype : 'combo',
    			fieldLabel : 'ComboBox',
    			displayField: 'label',
    			valueField : 'value',
    			store : Ext.create('Ext.data.Store',{
    						fields : ['label','value'],
    						data : [
    							['label1','value1'],
    							['label2','value2'],
    							['label3','value3']
    						]
    					})
    		}],
    		renderTo : Ext.getBody()
    	})
    })
    
    

    ▶ 실행결과



    매칭을 시켜주니 제대로 목록이 출력 되었습니다.


    데이터스토어에서 알아두어야 할 점

    ① 데이터 스토어를 보면 fields 와 data config를 기본적으로 선언 해주셔야 합니다.

    만약, fields를 선언하지 않으신다면 모델클래스를 선언해야 하는데 해당 내용은 이후에 다루도록 하겠습니다.

    data config 속성에 현재 다중배열값으로 목록을 선언지만, JSON 값으로도 선언을 주어도 이상없이 출력됩니다.


    ▶ Array to JSON

    
    data : [
    	        {
    	        	label : 'label1',
    	        	value : 'value1'
    	        },
    		{
    	        	label : 'label2',
            		value : 'value2'
    	        },
    		{
    	        	label : 'label3',
    	        	value : 'value3'
    	        }
    ]
    
    


    JSON 형태로 변환을 해주어도 제대로 출력이 되는것을 확인 할 수 있습니다.

    Array 형태의 경우는 값의 순서가 뒤바뀌면 안되는 대신, 

    value만 넣으면 된다는 장점이 있으며,

    JSON 형태는 KEY : VALUE 형태로 선언이 되기때문에 순서가 뒤바뀌어도 선언된 key를 찾아 표출이 된다는 것이 장점이 있습니다.


    다음 장부터 데이터스토어를 사용하여 데이터 출력에 관한 내용을 다루어 볼텐데 당분간은 로컬 데이터로 설명을 한 다음, 이후 비동기(Ajax) 방식으로 스토어를 핸들링 해보도록 하겠습니다.




    신고
    Posted by 몽고