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

컨트롤러에서 새로 추가한 스토어를 로드하도록 변경합니다.
[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', stores: [ 'Users' ], ... });

그리드 리스트에서도 내부 스토어를 생성하는 대신에 참조하는 로직으로 변경합니다.
[수정] app/view/user/List.js
Ext.define('Vicki.view.user.List' ,{ extend: 'Ext.grid.Panel', alias : 'widget.userlist', store: 'Users', ... });

Model 만들기

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

[추가] app/model/User.js
Ext.define('Vicki.model.User', { extend: 'Ext.data.Model', fields: ['name', 'email'] });

컨트롤러에 모델을 등록합니다.
[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', stores: [ 'Users' ], models: [ 'User' ], ... });

스토어에서 생성한 모델을 사용하도록 수정합니다.
[수정] app/store/Users.js
Ext.define('Vicki.store.Users', { extend: 'Ext.data.Store', model: 'Vicki.model.User', data: [ {name: 'Vicki', email: 'vicki[at]netsgo.com'}, {name: '자수씨', email: 'vicki[at]vicki.co.kr'} ] });


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

파일구조

참고자료

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