Ext JS 4 시작하기 (6)
JavaScript/ExtJS / 2011. 9. 13. 20:30
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
'useredit button[action=save]' 라는 ComponentQuery selector 에 의해 저장 버튼 클릭에 대한 이벤트 핸들러를 추가하였습니다.
'useredit button[action=save]' 는 아래의 의미로 해석됩니다.
useredit: 'widget.useredit' 로 등록된 컴포넌트의
button: 버튼 중에
[action=save]: action config 가 save 인
button: 버튼 중에
[action=save]: action config 가 save 인
아래와 같이 정상적으로 핸들러에서 처리가 되는지를 확인한 후 다음단계로 진행합니다.
[수정] app/controller/Users.js
updateUser() 함수에서 up, down 함수를 이용하여 그리드의 레코드의 값을 변경하는 작업을 통해 아래와 같이 레코드가 변경된 것을 확인할 수 있습니다.
서버에 저장하기
지금까지는 Users 스토어에 하드코딩된 두개의 레코드를 사용하였습니다. AJAX 를 이용하여 손쉽게 데이터를 로드해보도록 하겠습니다.[추가] data/users.json
스토어에서 하드코딩된 레코드를 제거하고 proxy 를 추가하여 서버에서 데이터를 주고 받을 수 있도록 수정합니다.
[수정] app/store/Users.js
proxy api 를 통해 손쉽게 read, update 에 대한 처리를 할 수 있습니다.
[수정] app/store/Users.js
[수정] app/controller/Users.js::updateUser()
컨트롤러에 store, model, view 를 등록하게 되면 get 함수가 자동으로 등록이 됩니다.
지금까지 작성된 컨트롤러를 예를 들면, getUserModel(), getUsersStore(), getUserListView(), getUserEditView() 함수가 추가되어 컨트롤러에서 사용이 가능합니다.
지금까지 작성된 컨트롤러를 예를 들면, 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