Ext JS 4 시작하기 (5)

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)



2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)



2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (3)



2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (4)

Store 만들기

지금까지 'Vicki.view.user.List' 컴포넌트는 내부에서 스토어를 생성했었습니다. 이번 작업은 다른 곳에서 스토어를 참조하여 수정이 가능한 구조를 만들 예정입니다.


[추가] app/store/Users.js

<br/> Ext.define('Vicki.store.Users', {<br/> extend: 'Ext.data.Store',<br/> fields: ['name', 'email'],<br/> data: [<br/> {name: 'Vicki', email: 'vicki[at]netsgo.com'},<br/> {name: '자수씨', email: 'vicki[at]vicki.co.kr'}<br/> ]<br/>});<br/>


컨트롤러에서 새로 추가한 스토어를 로드하도록 변경합니다.

[수정] app/controller/Users.js

<br/> Ext.define('Vicki.controller.Users', {<br/> extend: 'Ext.app.Controller',<br/> <br/> stores: [<br/> 'Users'<br/> ],<br/><br/> ...<br/> <br/>});<br/>


그리드 리스트에서도 내부 스토어를 생성하는 대신에 참조하는 로직으로 변경합니다.

[수정] app/view/user/List.js

<br/> Ext.define('Vicki.view.user.List' ,{<br/> extend: 'Ext.grid.Panel',<br/> alias : 'widget.userlist',<br/> <br/> store: 'Users',<br/><br/> ...<br/>});<br/>

Model 만들기

위에서 만든 스토어도 내부에서 필드를 정의하고 있습니다. Ext JS 4 에서는 강력한 기능을 가지고 있는 Ext.data.Model 클래스를 통해 모델을 정의할 수 있습니다.


[추가] app/model/User.js

<br/> Ext.define('Vicki.model.User', {<br/> extend: 'Ext.data.Model',<br/> fields: ['name', 'email']<br/>});<br/>


컨트롤러에 모델을 등록합니다.

[수정] app/controller/Users.js

<br/> Ext.define('Vicki.controller.Users', {<br/> extend: 'Ext.app.Controller',<br/> <br/> stores: [<br/> 'Users'<br/> ],<br/> <br/> models: [<br/> 'User'<br/> ],<br/><br/> ...<br/> <br/>});<br/>


스토어에서 생성한 모델을 사용하도록 수정합니다.

[수정] app/store/Users.js

<br/> Ext.define('Vicki.store.Users', {<br/> extend: 'Ext.data.Store',<br/> model: 'Vicki.model.User',<br/> data: [<br/> {name: 'Vicki', email: 'vicki[at]netsgo.com'},<br/> {name: '자수씨', email: 'vicki[at]vicki.co.kr'}<br/> ]<br/>});<br/>



컴포넌트 내부에 스토어를 정의하는 것과 다양한 기능을 제공하는 스토어와 모델을 정의하여 사용한 결과물이 아래와 같이 동일하게 나오는 것 까지 확인하였습니다.

파일구조

참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture