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

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


'useredit button[action=save]' 라는

ComponentQuery

selector 에 의해 저장 버튼 클릭에 대한 이벤트 핸들러를 추가하였습니다.


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

useredit: 'widget.useredit' 로 등록된 컴포넌트의

button: 버튼 중에

[action=save]: action config 가 save 인

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

[수정] app/controller/Users.js

<br/> updateUser: function(button) {<br/> var win = button.up('window'),<br/> form = win.down('form'),<br/> record = form.getRecord(),<br/> values = form.getValues();<br/><br/> record.set(values);<br/> win.close();<br/>}<br/>


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

서버에 저장하기

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


[추가] data/users.json

<br/> {<br/> success: true,<br/> users: [<br/> {id: 1, name: 'Vicki', email: 'vicki[at]netsgo.com'},<br/> {id: 2, name: '자수씨', email: 'vicki[at]vicki.co.kr'}<br/> ]<br/>}<br/>


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


[수정] app/store/Users.js

<br/> Ext.define('Vicki.store.Users', {<br/> extend: 'Ext.data.Store',<br/> model: 'Vicki.model.User',<br/> proxy: {<br/> type: 'ajax',<br/> url: 'data/users.json',<br/> reader: {<br/> type: 'json',<br/> root: 'users',<br/> successProperty: 'success'<br/> }<br/> }<br/>});<br/>



proxy api 를 통해 손쉽게 read, update 에 대한 처리를 할 수 있습니다.

[수정] app/store/Users.js

<br/> Ext.define('Vicki.store.Users', {<br/> extend: 'Ext.data.Store',<br/> model: 'Vicki.model.User',<br/> proxy: {<br/> type: 'ajax',<br/> url: 'data/users.json',<br/> reader: {<br/> type: 'json',<br/> root: 'users',<br/> successProperty: 'success'<br/> }<br/> }<br/>});<br/>


[수정] app/controller/Users.js::updateUser()

<br/> updateUser: function(button) {<br/> var win = button.up('window'),<br/> form = win.down('form'),<br/> record = form.getRecord(),<br/> values = form.getValues();<br/><br/> record.set(values);<br/> win.close();<br/> this.getUsersStore().sync();<br/>}<br/>

컨트롤러에 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