ExtJS6 열두번째강의 - ExtJS 6 콤보박스를 이용한 데이터스토어 이해(1) (ExtJS 6 Understanding DataStore)

▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼

https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ

데이터스토어(Ext.data.Store)

스토어 클래스는 Ext.data.proxy.Proxy 클래스를 통하여 데이터로드(Ajax Call) 하고 내부에 정의 된 Ext.data.Model 객체를 정렬,필터링 및 쿼링하는 기술을 제공

정의는 위와 같지만, 간단하게 생각을 하면, 단순히 호출 또는 정의된 데이터들을 담는 일종의 저장공간이라 생각하면 됨.

<select> 태그의 경우, 목록을 보여 주기 위해서는 <option> 태그가 하위 태그로 정의되야 셀렉트박스의 목록이 출력됩니다.

또한, <table> 태그에서 목록을 출력하기 위해서는 <tr>과 <td>의 조합으로 목록구성이 되야 테이블 리스트가 출력되는것처럼 하위에 특정 공간이 있어야 목록이 출력시키는 개념과 유사하게 데이터 스토어가 존재해야 출력되는 컴포넌트들이 다량 존재합니다.

우리는 데이터스토어를 처음 접하는 상태이므로, 폼필드의 콤보박스와 연동하여 예제를 들어보도록 합니다.

데이터스토어의 fields 속성

JSON Array로 내려주는 데이터결과의 KEY값을 매칭시켜주는 데이터스토어의 속성.

예전 버전에서는 Ext.data.Model 속성을 정의하고 데이터스토어의 model 속성에 정의해주었으나 버전이 올라가면서 model 클래스를 사용할 필요없이, 데이터스토어의 fields 속성만 정의해주어도 매핑이 됩니다.

예를 들어, JSON 의 결과값이 아래의 데이터로 출력되었다고 가정합니다.

[{

   key1 : 'JSON테스트1',

   key2 : 'JSON테스트11'

},

{

   key1 : 'JSON테스트2',

   key2 : 'JSON테스트22'

},

{

   key1 : 'JSON테스트2',

   key2 : 'JSON테스트22'

}]

위와 같이 데이터 결과값이 정의 되어있다면, 

fields 속성에는 key1, key2에 대한 필드를 선언해주시면 되겠습니다.

콤보박스에 store config 속성

그리드, 차트, 트리, 콤보등 데이터스토어가 존재하여야 화면에 결과물이 출력되는 대부분의 컴포넌트들은 config 속성 중, store 속성이 존재합니다.

이럴경우, 데이터 스토어를 생성 후, store 속성에 선언을 해주셔야 정상적인 컴포넌트의 데이터 결과를 확인 하실 수 있습니다.

combobox의 displayField : 데이터스토어랑 연결이 완료되었다면, fields에서 정의된 필드명 중에서 콤보박스의 목록에서 시각적으로 보여주고자 하는 필드명을 정의해줍니다.

<option value="aaa">테스트</option>

위 태그에서 "테스트"에 해당되는 필드명을 입력해주시면 됩니다.

combobox의 valueField : 데이터스토어에 선언 된 필드명 중, 콤보박스에서 선택했을 때의 실질적인 value 필드명을 정의해주면 됩니다.

<option value="aaa">테스트</option>

위 태그에서 "aaa" 에 해당되는 필드명을 입력해주시면 됩니다.