ExtJS 기초강좌 14 - 콤보박스(xtype : combo) 로 데이터스토어 이해하기
가공된 데이터를 화면에 출력을 시켜주는 데이터스토어(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) 방식으로 스토어를 핸들링 해보도록 하겠습니다.
