Ext JS 4 시작하기 (4)

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)

그리드 제어하기

'onPanelRendered' 함수는 여전히 호출되고 있습니다. 'viewport > panel' 셀렉터에 의해서 동작을 하게 됩니다. 우리가 생성한 List 클래스는 그리드를 상속받았는데, 그리드는 패널을 상속받았기 때문입니다.

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

'Ext.window.Window' 클래스를 상속받았으며, alias 는 'widget.useredit' 로 등록되었습니다. 추후에 xtype 'useredit' 로 로딩이 가능합니다. autoShow 속성이 true 로 설정되어 생성되는 즉시 보여지게 됩니다.

윈도우 내부에는 이름과 이메일 필드가 포함된 '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 패널에 그리드에서 선택된 레코드 정보를 채워주게 됩니다.

down(String selector, [Boolean returnDom]) 함수는 CSS 셀렉터를 기반으로 자식요소를 검색합니다.

파일구조

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

참고자료

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