Ext JS 4 시작하기 (3)

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); } });

슈퍼클래스의 함수를 호출하는 방식이 기존의 Ext JS 3 에서 사용하던 '[class].superclass.[function].apply(this, arguments)' 방식에서 '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