불친절한자수씨

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]' 는 아래의 의미로 해석됩니다.


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



[수정] 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(); }


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




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

파일구조

참고자료

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

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

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)

그리드 제어하기

'Vicki.view.user.List' 클래스만 컨트롤 하도록 컨트롤러를 수정합니다.
[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', views: [ 'user.List' ], init: function() { this.control({ 'userlist': { itemdblclick: this.editUser } }); }, editUser: function(grid, record) { console.log(record.get('name') + '이(가) 더블클릭 되었습니다.'); } });

컴포넌트 셀렉터의 'userlist' 는 alias 가 'userlist' 정의된 클래스의 인스턴스들을 처리하게 됩니다.

수정 윈도우 추가하기

그리드 데이터를 수정할 수 있는 윈도우 클래스를 생성합니다.

[추가] app/view/user/Edit.js
Ext.define('Vicki.view.user.Edit', { extend: 'Ext.window.Window', alias : 'widget.useredit', title : 'Edit User', layout: 'fit', autoShow: true, initComponent: function() { this.items = [ { xtype: 'form', items: [ { xtype: 'textfield', name : 'name', fieldLabel: 'Name' }, { xtype: 'textfield', name : 'email', fieldLabel: 'Email' } ] } ]; this.buttons = [ { text: 'Save', action: 'save' }, { text: 'Cancel', scope: this, handler: this.close } ]; this.callParent(arguments); } });

윈도우 내부에는 이름과 이메일 필드가 포함된 'form' 으로 구성되었습니다.

[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', views: [ 'user.List', 'user.Edit' ], init: ... editUser: function(grid, record) { var view = Ext.widget('useredit'); view.down('form').loadRecord(record); }, });

views 에 'user.Edit' 를 추가하고 editUser 함수를 수정합니다.
Ext.widget('useredit') 라는 함수를 이용하여 'Vicki.view.user.Edit' 인스턴스를 생성할 수 있습니다.
윈도우 내부 form 패널에 그리드에서 선택된 레코드 정보를 채워주게 됩니다.

파일구조

지금까지 작업에 대한 파일구조는 아래와 같습니다.

참고자료

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

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

뷰 정의하기

현재까지 app.js 와 app/controller/Users.js 를 이용하여 애플리케이션을 구성하였습니다.
이제 그리드를 이용하여 사용자를 표시할 수 있는 뷰 영역을 구성해보도록 하겠습니다.

[추가] app/view/user/List.js
Ext.define('Vicki.view.user.List' ,{ extend: 'Ext.grid.Panel', alias : 'widget.userlist', title : 'All Users', initComponent: function() { this.store = { fields: ['name', 'email'], data : [ {name: 'Vicki', email: 'vicki[at]netsgo.com'}, {name: '자수씨', email: 'vicki[at]vicki.co.kr'} ] }; this.columns = [ {header: 'Name', dataIndex: 'name', flex: 1}, {header: 'Email', dataIndex: 'email', flex: 1} ]; this.callParent(arguments); } });



뷰를 정의했으면 컨트롤러에 관련된 뷰를 추가합니다.
views 에 네임스페이스와 view 패키지를 제외한 나머지 이름으로 추가합니다. 'Vicki.view.user.List' 뷰를 추가하는 것이므로 'user.List' 를 컨트롤러의 views 속성에 정의합니다.

[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { ... views: [ 'user.List' ], ... });

[수정] app..js
Ext.application({ ... launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'userlist' } ] }); } });

'Vicki.view.user.List' 의 alias 를 'widget.userlist' 로 정의하여 등록이 되었으므로, xtype 은 'userlist' 로 사용이 가능합니다.  

파일구조

지금까지 작성한 애플리케이션의 파일 구조는 아래와 같습니다.

참고자료

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

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

컨트롤러 정의하기

서버사이드의 MVC 모델 처럼 각종 이벤트와 처리를 담당하는 컨트롤러를 정의할 수 있습니다.
Ext.application 생성 시에 정의했던 appFolder 밑에 컨트롤러 파일을 생성합니다. (app/controller/Users.js)




[추가] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', init: function() { console.log('사용자 컨트롤러를 초기화합니다. Application 의 launch 함수가 불려지기 전에 호출됩니다.'); } });

[수정] app.js
Ext.application({ ... controllers: ['Users'], ... });

생성한 컨트롤러를 애플리케이션에 추가하게 되면 자동으로 해당 자바스크립트 파일을 로드하게 됩니다. 컨트롤러의 init 함수는 Application 이 launch 되기 전에 호출이 되게 됩니다.





컨트롤러의 init 함수는 뷰에 대한 처리를 할 수 있으며, 다른 컨트롤러와의 연결에 사용하기도 합니다.
쉽게 예를 들어 패널이 렌더링 될 때 제어하기 위해서 control 함수를 이용할 수 있습니다.

[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', init: function() { this.control({ 'viewport > panel': { render: this.onPanelRendered } }); }, onPanelRendered: function() { console.log('패널이 렌더링되었습니다.'); } });

Ext JS 4 에 추가된 것 중 하나가 ComponentQuery 입니다. 'viewport > panel' 은 "Viewport 의 직계 자손 컴포넌트 중 모든 Panel 을 찾아라" 라는 뜻입니다. ComponentQuery 의 자세한 내용은 기회가 되면 다시...

control 함수에 추가된 render 이벤트 핸들러에 의해 패널이 렌더링될 때 메시지에 콘솔 창에 출력되게 됩니다.






지금까지 작성된 프로젝트의 파일구조는 아래와 같습니다.

참고자료

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