ExtJS에서 스토어는 상당히 자주 사용되는 ExtJS 클래스입니다.
앞으로 girdpanel,treepanel,combo 등...
다양한 컴포넌트에 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클래스를 사용하여 콤보박스를 구현해보도록 하겠습니다.
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 역시 정의하여 재활용이 가능합니다.
뭐... 우선은 "아 그렇구나~" 라는 정도만 알고계시라고요 ㅎㅎ
이번 포스팅은 proxy type을 memory에대하여 설명하였는데
다음 장은 proxy type이 ajax에 대하여 포스팅 하도록 하겠습니다.
by 개발로짜
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 |