Ext JS 4 시작하기 (6)

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)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (5)

모델의 데이터 저장하기

지금까지 만든 그리드를 더블 클릭하여 보여지는 수정 창은 실제로 저장이되지 않습니다. 이번에는 저장버튼 클릭에 대한 처리를 진행합니다.

[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { ... init: function() { this.control({ 'userlist': { itemdblclick: this.editUser }, 'useredit button[action=save]': { click: this.updateUser } }); }, ... updateUser: function(button) { console.log('저장버튼을 클릭하였습니다.'); } });

'useredit button[action=save]' 라는 ComponentQuery selector 에 의해 저장 버튼 클릭에 대한 이벤트 핸들러를 추가하였습니다.

'useredit button[action=save]' 는 아래의 의미로 해석됩니다.

useredit: 'widget.useredit' 로 등록된 컴포넌트의
button: 버튼 중에
[action=save]: action config 가 save 인

아래와 같이 정상적으로 핸들러에서 처리가 되는지를 확인한 후 다음단계로 진행합니다.

[수정] app/controller/Users.js
updateUser: function(button) { var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues(); record.set(values); win.close(); }

 updateUser() 함수에서 up, down 함수를 이용하여 그리드의 레코드의 값을 변경하는 작업을 통해 아래와 같이 레코드가 변경된 것을 확인할 수 있습니다.

서버에 저장하기

지금까지는 Users 스토어에 하드코딩된 두개의 레코드를 사용하였습니다. AJAX 를 이용하여 손쉽게 데이터를 로드해보도록 하겠습니다.

[추가] data/users.json
{ success: true, users: [ {id: 1, name: 'Vicki', email: 'vicki[at]netsgo.com'}, {id: 2, name: '자수씨', email: 'vicki[at]vicki.co.kr'} ] }

스토어에서 하드코딩된 레코드를 제거하고 proxy 를 추가하여 서버에서 데이터를 주고 받을 수 있도록 수정합니다.

[수정] app/store/Users.js
Ext.define('Vicki.store.Users', { extend: 'Ext.data.Store', model: 'Vicki.model.User', proxy: { type: 'ajax', url: 'data/users.json', reader: { type: 'json', root: 'users', successProperty: 'success' } } });


proxy api 를 통해 손쉽게 read, update 에 대한 처리를 할 수 있습니다.
[수정] app/store/Users.js
Ext.define('Vicki.store.Users', { extend: 'Ext.data.Store', model: 'Vicki.model.User', proxy: { type: 'ajax', url: 'data/users.json', reader: { type: 'json', root: 'users', successProperty: 'success' } } });

[수정] app/controller/Users.js::updateUser()
updateUser: function(button) { var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues(); record.set(values); win.close(); this.getUsersStore().sync(); }

컨트롤러에 store, model, view 를 등록하게 되면 get 함수가 자동으로 등록이 됩니다.
지금까지 작성된 컨트롤러를 예를 들면, getUserModel(), getUsersStore(), getUserListView(), getUserEditView() 함수가 추가되어 컨트롤러에서 사용이 가능합니다.

스토어의 sync() 함수를 통해 proxy api 의 update 처리를 하였습니다.

이상으로 Ext JS 4 - MVC 구조를 이용한 시작하기를 완료하였습니다. Ext JS 3 보다는 확실히 구조화되어 그들의 뜻만 이해한다면... 자바만큼의 개발 퍼포먼스를 낼 것 같습니다. 개발툴만 지원된다면... 좋을테지만...

파일구조

참고자료

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