불친절한자수씨

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

 

다운로드

http://www.sencha.com/products/extjs/download/ 에서 Ext JS 4 를 다운로드 받습니다.
이 글을 작성하는 시점에는 Ext JS 4.0.2a 를 GPL 로 제공합니다.

Ext JS 4 디렉토리 구성

다운로드 받은 파일의 압축을 풀고, 아래의 디렉토리/파일을 작업 폴더로 복사 합니다.





작업 디렉토리는 Ext JS 에서 제공하는 가이드 대로 아래와 같이 구성하였습니다.




웹 애플리케이션의 시작점인 index.html 을 프로젝트 루트에 아래와 같이 생성합니다.

app.js 의 생성

모든 Ext JS 4 애플리케이션은 Application 클래스의 인스턴스로 부터 시작됩니다.

Ext.application({ name: 'Vicki', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : '사용자 리스트' } ] }); } });

Ext.Application 에서 애플리케이션에 대한 별도의 설정이 가능합니다.

name 속성을 통해 전역변수를 설정하고 Ext.Loader 에 네임스페이스를 등록합니다.
appFolder 속성은 위에서 등록한 네임스페이스의 클래스 구조를 설정한 디렉토리를 설정합니다.
launch 함수는 애플리케이션 생성이 불려지는 함수를 정의합니다.


프로그램을 실행시키면 아래와 같은 화면이 나옵니다.

 

참고자료

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

Ext 에서 제공해주는 ArrayReader 는 위와 같은 방식으로 정의를 하며, 데이터는 아래와 같은 방식이여야 합니다.



하지만 아래와 같이 하나의 배열에 담긴 데이터가 들어올 때 읽어들일 수 있는 방법은 존재하지 않습니다. (찾아본 바로는...)


ArrayReader 로 읽더라도 스토어에는 'v', 't', 'd' 와 같이 앞의 한자리만 가지고오게 됩니다.


/app/ux/data/reader/SingleElementArray.js
Ext.define('WO.ux.data.reader.SingleElementArray', { extend: 'Ext.data.reader.Json', alternateClassName: 'Ext.data.SingleElementArray', alias : 'reader.singleElementArray', /** * @private */ buildExtractors: function() { this.callParent(arguments); var fields = this.model.prototype.fields.items, length = fields.length, extractorFunctions = [], i; for (i = 0; i < length; i++) { extractorFunctions.push(function(index) { return function(data) { if (typeof data == 'string') { return data; } return data[index]; }; }(fields[i].mapping || i)); } this.extractorFunctions = extractorFunctions; } });


위와 같이 단일 요소 배열도 처리할 수 있는 ArrayReader 를 확장한 후 아래와 같이 사용하면 끝~ 입니다.

Ext.define('SingleElement', { extend: 'Ext.data.Model', fields: ['key'] }); var store = Ext.create('Ext.data.Store', { model: 'SingleElement', proxy: { type: 'ajax', url: '/test.php', reader: { type: 'singleElementArray', root: 'data' } } });

Ext JS 4.0 에서 제공해주는 "Row Editing Grid" 는 아래와 같이 Update 와 Cancel 버튼 밖에 없습니다.
(http://docs.sencha.com/ext-js/4-0/#!/example/grid/row-editing.html)




위의 기능에 Delete 버튼이 있으면 좋을 것 같아서 클래스를 확장해 보았습니다.

/app/ux/grid/plugin/DeletableRowEditing.js
Ext.define('WO.ux.grid.plugin.DeletableRowEditing', { extend: 'Ext.grid.plugin.RowEditing', alias: 'plugin.ux.deletablerowediting', initComponent: function() { this.addEvents({ deleterow: true }); this.callParent(arguments); }, // override initEditor: function() { var me = this, grid = me.grid, view = me.view, headerCt = grid.headerCt; return Ext.create('WO.ux.grid.DeletableRowEditor', { autoCancel: me.autoCancel, errorSummary: me.errorSummary, fields: headerCt.getGridColumns(), hidden: true, // keep a reference.. editingPlugin: me, renderTo: view.el }); }, deleteRow: function(record) { var me = this; me.getEditor().deleteRow(); me.fireEvent('deleterow', record); } });

/app/ux/grid/DeletableRowEditor.js
Ext.define('WO.ux.grid.DeletableRowEditor', { extend: 'Ext.grid.RowEditor', deleteBtnText: 'Delete', // override getFloatingButtons: function() { var me = this, cssPrefix = Ext.baseCSSPrefix, btnsCss = cssPrefix + 'grid-row-editor-buttons', plugin = me.editingPlugin, btns; if (!me.floatingButtons) { btns = me.floatingButtons = Ext.create('Ext.Container', { renderTpl: ['<div class="{baseCls}-ml"></div>', '<div class="{baseCls}-mr"></div>', '<div class="{baseCls}-bl"></div>', '<div class="{baseCls}-br"></div>', '<div class="{baseCls}-bc"></div>'], renderTo: me.el, baseCls: btnsCss, layout: { type: 'hbox', align: 'middle' }, defaults: { margins: '0 1 0 1' }, items: [{ itemId: 'update', flex: 1, xtype: 'button', handler: plugin.completeEdit, scope: plugin, text: me.saveBtnText, disabled: !me.isValid }, { flex: 1, xtype: 'button', handler: Ext.Function.pass(plugin.deleteRow, [me.context.record], plugin), scope: plugin, text: 'Delete' }, { flex: 1, xtype: 'button', handler: plugin.cancelEdit, scope: plugin, text: me.cancelBtnText }] }); // Prevent from bubbling click events to the grid view me.mon(btns.el, { // BrowserBug: Opera 11.01 // causes the view to scroll when a button is focused from mousedown mousedown: Ext.emptyFn, click: Ext.emptyFn, stopEvent: true }); } return me.floatingButtons; }, deleteRow: function(record) { var me = this; me.hide(); } });


위와 같이 Editing 클래스와 Editor 클래스를 확장한 후 그리드 패널에 위에서 생성한 플러그인으로 설정하면 됩니다.

Row Editing Grid 정의
Ext.define('WO.view.XxxxGrid', { extend: 'Ext.grid.Panel', ... initComponent: function() { this.selMode = 'rowmodel'; this.plugins = [Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 })]; ... } ... });

Deletable Row Editing Grid 정의
- 리스너에 deleterow 이벤트 핸들러를 추가하여 수정 중인 행에 대한 record 인자로 받아 처리합니다.
(나중에 내공이 더 쌓이면 내부 기능으로 붙여버리는 것도 고려를... 으흠...)
Ext.define('WO.view.XxxxGrid', { extend: 'Ext.grid.Panel', requires: ['WO.ux.grid.plugin.DeletableRowEditing'], ... initComponent: function() { this.selMode = 'rowmodel'; this.plugins = [Ext.create('WO.ux.grid.plugin.DeletableRowEditing', { this.plugins = [Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1, listeners: { deleterow: function(record) { // do not something... } } })]; ... } ... });

지난 금요일에 Ext JS 4 에 대해 포스팅 이 하나 더 올라왔습니다. 새로워진 Data Package 에 대해 알아보도록 하겠습니다.


Data Package 는 Ext JS 4 에서 완벽하게 다시 쓰여졌습니다. 하지만 이전 버전과 같은 접근 방식으로 사용할 수 있습니다.


무엇이 달라졌을까?
Ext JS 4 의 Data Package 는 43 종류의 클래스로 구성되어 있습니다. Model, Proxy, Store 가 가장 중요한 클래스 3개와 나머지로 구성되어 있습니다.





모델과 스토어
데이터 패키지의 중심은 Ext.data.Model 입니다. 모델은 어플리케이션에서 몇가지 데이터 타입으로 표현됩니다. 가장 심플한 모델은 필드와 데이터로 설정됩니다. Ext JS 3  에서는 Ext.data.Model 의 선구자 격인 Ext.data.Record 를 유사하게 사용하였습니다. 새로운 모델을 만드는 방법은 아래와 같습니다.
Ext.regModel('User', { fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ] })
모델은 일반적으로 스토어와 함께 기본적인 모델 인스턴스의 집합으로 사용됩니다. 간단하게 스토어를 설정하고 데이터를 로딩하는 방법은 아래와 같습니다.
new Ext.data.Store({ model: 'User', proxy: { type: 'ajax', url : 'users.json', reader: 'json' }, autoLoad: true });
User 모델 인스턴스는 'users.json' 의 url 을 통해 로드됩니다. 스토어는 AjaxProxy 를 사용하며, url 을 통해 읽어들인 데이터를 Ext.data.Reader 클래스를 통해 디코드 하도록 설정되어 있습니다. 이 경우 서버는 json 을 반환하므로 응답에 대해 JsonReader 가 설정되어야 합니다.

스토어는 Ext JS 4 를 사용한다면, 리모트에서 뿐만 아니라, 로컬에서 정렬, 필터링, 그룹핑을 수행할 수 있습니다. 더 이상 별도의 GroupingStore 는 필요하지 않습니다. 다중 정렬, 필터링, 그룹핑을 표준 스토어에서 처리할 수 있습니다.
new Ext.data.Store({ model: 'User', sorters: ['name', 'id'], filters: { property: 'name', value : 'Ed' }, groupers: { property : 'age', direction: 'ASC' } });
스토어가 생성되면, 데이터는 id 보다 name 을 우선순위로 정렬이 됩니다. name 이 'Ed' 인것만 포함되도록 필터링 되며, age 로 그룹핑될 것 입니다. Store API 를 통해 언제든지 쉽게 정렬, 필터링과 그룹핑을 변경할 수 있습니다.



프록시
아래를 통해 스토어를 사용하여 프록시에서 데이터를 어떻게 읽어들이는지 볼 수 있습니다. Ext JS 4 에서의 한가지 구조적 변화는 스토어에서 Reader 와 Writer 에 대한 직접 연결이 필요없다는 것 입니다. 이것은 엄청난 혜택을 제공합니다. 프록시를 모델에서 직접 정의할 수 있습니다.
Ext.regModel('User', { fields: ['id', 'name', 'age'], proxy: { type: 'rest', url : '/users', reader: { type: 'json', root: 'users' } } }); //uses the User Model's Proxy new Ext.data.Store({ model: 'User' });
첫번째는 같은 방식으로 데이터를 로드하는 모델을 사용하는 스토어의 중복을 피할 수 있습니다. 두번째는 모델 데이터의 저장과 불러오기를 스토어 없이 할 수 있습니다.
//gives us a reference to the User class var User = Ext.getModel('User'); var ed = new User({ name: 'Ed Spencer', age : 25 }); //we can save Ed directly without having to add him to a Store first because we //configured a RestProxy this will automatically send a POST request to the url /users ed.save({ success: function(ed) { console.log("Saved Ed! His ID is "+ ed.getId()); } }); //load User 123 and do something with it (performs a GET request to /users/123) User.load(123, { success: function(user) { console.log("Loaded user 123: " + user.get('name')); } });
HTML5 의 새로운 기능을 활용하여 몇 가지 새로운 프록시를 도입하였습니다(LocalStoargeProxy, SessionStorageProxy). 이전 브라우저는 새로운 HTML5 API 를 지원하지는 않지만, 많은 애플리케이션들이 그들의 존재로부터 엄청난 혜택을 알고 있기에 유용합니다. 그리고 필요로 하는 프록시가 없는 경우 쉽게 만들 수 있습니다.



연관 (Associations)
프록시는 모델에 새로운 기능을 추가하는 것에 지나지 않습니다. 새로운 Association API 와 함께 모델을 연결할 수 있습니다. 대부분의 애플리케이션은 다양한 모델과 거의 대부분이 모델과 연관된 것으로 다루어 집니다. 블로그 작성 애플리케이션은 사용자(User), 포스트(Post)와 댓글(Comment)을 가지고 있을 것 입니다. 각 사용자는 포스트를 작성하고, 각 포스트는 댓글을 전달받을 것 입니다. 이들의 관계는 아래와 같이 표현할 수 잇습니다.
Ext.regModel('User', { fields: ['id', 'name'], hasMany: 'Posts' }); Ext.regModel('Post', { fields: ['id', 'user_id', 'title', 'body'], belongsTo: 'User', hasMany: 'Comments' }); Ext.regModel('Comment', { fields: ['id', 'post_id', 'name', 'message'], belongsTo: 'Post' });
이것을 통해 애플리케이션에서 다른 모델들 간의 풍부한 관계를 표현하기 쉬워집니다. 각 모델들은 임의의 순서를 정의할 수 있는 모델을 통해 임의의 연관 번호를 가질 수 있습니다. 일단 모델 인스턴스를 갖는다면, 쉽게 연관 데이터를 조회할 수 있습니다. 예를 들어, 특정 사용자의 각 포스트에 만들어진 댓글을 로깅하기를 원한다면 아래처럼 할 수 있습니다.
//loads User with ID 123 using User's Proxy User.load(123, { success: function(user) { console.log("User: " + user.get('name')); user.posts().each(function(post) { console.log("Comments for post: " + post.get('title')); post.comments().each(function(comment) { console.log(comment.get('message')); }); }); } });
각 hasMany 관계는 모델에 추가된 새로운 함수에 의한 결과 위에 만들어집니다. 각 사용자 모델은 hasMany 포스트로 선언되었습니다. user.posts() 호출에 의한 결과 스토어는 포스트 모델에 의해 구성됩니다. 결과적으로 설정된 hasMany 댓글 연관으로 인해 포스트 모델은 comments() 함수에서 댓글들을 가지고 올 수 있습니다.

User.load 호출에서 'success' 함수로 왜 전달을 해야 하는지 궁금해 할 수도 있습니다. 하지만 사용자의 포스트와 댓글을 접근할 때 그럴 필요가 없어졌습니다. 모든 데이터는 보통 어딘가에 있는 서버로 부터 로드되어야 하기 때문에 비동기적으로 로드될 것으로 간주합니다. 이것은 보통 위에 정의된 'success' 함수와 마찬가지로 데이터가 로드되었을 때 호출되는 콜백에 전달하는 것을 의미합니다.



중첩 데이터 로드(Loading Nested Data)
위에서 그랬듯이 연관을 설정함으로써, 프레임워크가 단일 요청에 의해 자동으로 중첩 데이터를 파싱 할 수 있습니다. 단일 서버에 응답으로 이 모든 데이터를 반환할 수 있습니다.
{ id: 1 name: 'Ed', posts: [ { id : 12, title: 'All about data in Ext JS 4', body : 'One of the areas that has seen the most improvement in Ext JS 4...', comments: [ { id: 123, name: 'S Jobs', message: 'One more thing' } ] } ] }
데이터는 프레임워크에 의해 모두 자동으로 파싱됩니다. 대부분 환경에서 데이터를 로드하는 모델에 대한 프록시들을 쉽게 구성할 수 있고, Reader 들은 대부분의 형식을 처리할 수 있습니다. Ext JS 3 과 마찬가지로, 모델과 스토어는 그리드, 트리와 폼과 같은 다양한 구성요소들의 프레임워크에 걸쳐 사용됩니다.


아래 그림은 Ext JS 4 가 곧 출시된다는 것을 표현한 것 입니다. 먼가 확 와닫는 디자인이네요.
 

Ext JS 4 가 슬슬 공개가 되려나 봅니다. Sencha 블로그 에 관련 포스팅이 올라왔습니다.

다이나믹 로딩과 새로운 클래스 시스템에 대한 설명입니다.


ㅁ Ext JS 4 Class System



Ext JS 4 에서는 새로운 네가지 특징(클래스 정의, 믹스인, 자동 getter/setter 설정, 다이나믹 디펜던시 로딩)을 갖습니다.


1. 클래스 정의

Ext JS 3 버전에서는 아래와 같은 방식으로 클래스를 정의하였습니다.
//Ext JS 3.x class definition MyApp.LoginWindow = Ext.extend(Ext.Window, { title: 'Log in', initComponent: function() { Ext.apply(this, { items: [ { xtype: 'textfield', name : 'username', fieldLabel: 'Username' }, ... ] }); MyApp.LoginWindow.superclass.initComponent.apply(this, arguments); } });

Ext JS 4 에서는 아래와 같이 "Ext.define" 이라는 함수를 이용하여 새로운 클래스를 정의합니다.
//Ext JS 4.x class definition Ext.define('MyApp.LoginWindow', { extend: 'Ext.Window', title: 'Log in', initComponent: function() { Ext.apply(this, { items: [ //as above ] }); MyApp.LoginWindow.superclass.initComponent.apply(this, arguments); } });

Ext JS 4 의 클래스 매니저를 통해 문자열로 설정된 부모 클래스를 찾아 새로운 클래스를 정의하는 구조로 변경되었습니다.

클래스 정의가 깔끔해지긴 했지만, 아직까지 큰 장점에 대해서는 와 닿지 않네요.



2. 믹스인

믹스인은 재사용이 가능한 행동이나 구성을 정의한 것으로 쉽게 클래스에 정의가 가능합니다. 하나의 클래스에는 여러 개의 믹스인을 적용할 수 있습니다.
Ext.define('Sample.Musician', { extend: 'Sample.Person', mixins: { guitar: 'Sample.ability.CanPlayGuitar', compose: 'Sample.ability.CanComposeSongs', sing: 'Sample.ability.CanSing' } });

위의 "Sample.Musician" 클래스는 "guitar" 에 대해 "Sample.ability.CanPlayGuitar" 의 기능을 갖게 되는 것 입니다. DI 랑 유사한 구조라고 볼 수도 있을 것 같습니다.
Ext.define('Sample.ability.CanPlayGuitar', { playGuitar: function() { //code to play } });



3. 자동 getter/setter 설정

Ext JS 4 에서는 아래와 같이 정의를 하게 되면 title 과 관련된 getter/setter 가 자동으로 정의됩니다.
Ext.define('MyClass', { config: { title: 'Default Title' } });

Ext JS 3.3 에서 위와 같은 효과를 보려면 아래와 같이 클래스를 정의해야 합니다.
MyClass = Ext.extend(MyBaseClass, { title: 'Default Title', getTitle: function() { return this.title; }, resetTitle: function() { this.setTitle('Default Title'); }, setTitle: function(newTitle) { this.title = this.applyTitle(newTitle) || newTitle; }, applyTitle: function(newTitle) { //custom code here } });

자동으로 생성된 getter/setter 에 대해 오버라이딩도 가능합니다.
Ext.define('MyClass', { extend: 'MyBaseClass', config: { title: 'Default Title' }, applyTitle: function(newTitle) { Ext.get('titleEl').update(newTitle); } });

getter/setter 정의가 코드에서 빠지면서 소스 코드의 크기도 많이 줄어들 것으로 예상됩니다.



4. 다이나믹 로딩

이전의 Ext JS 에서는 사용하는 클래스가 미리 다운로드 되어 있지 않는 경우 에러를 발생하게 됩니다. Ext JS 4 의 Ext.require() 함수를 이용하여, Ext.Window 클래스가 다운로드 되어 로드 되는 시점에 호출이 되도록 처리할 수 있습니다.
Ext.require('Ext.Window', function() { new Ext.Window({ title : 'Loaded Dynamically!', width : 200, height: 100 }).show(); });

Ext.Window 는 아래와 같이 extend, requires, mixins 설정으로 정의되어 있습니다. 관련 설정들이 안정적으로 로드될 때 까지 다이나믹 로더가 반복적으로 작업을 처리하게 됩니다.
Ext.define('Ext.Window', { extend: 'Ext.Panel', requires: ['Ext.util.MixedCollection'], mixins: { draggable: 'Ext.util.Draggable' } });

이전의 Ext JS 의 경우 ext-all-debug.js 파일 안에 모든 클래스들이 정의되어 있었습니다. 실제 운영환경에서 사용하기에는 사이즈가 너무 크기에 JS Builder 를 이용하여 ext-all.js 파일로 배포를 하지만 그 사이즈도 만만치가 않습니다. 다이나믹 로더를 통해 필요한 클래스들만 로드할 수 있는 구조가 될 것으로 생각됩니다.

클래스 구조

드디어 Ext JS 도 자바의 패키지의 구조 처럼 패키지를 폴더로 구성하는 것 같습니다. 다이나믹 로더에서 패키지 명을 토대로 클래스 위치를 판단하여 로딩하는 구조라면... 조금 더 직관적인 환경으로 발전해 나갈 것 같습니다.



Ext JS 4 기대가 되는군요...