Ext JS 4 시작하기 (2)

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

컨트롤러 정의하기

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

Ext JS 4 에서는 자바와 같이 패키징 네이밍 규칙에 대해 디렉토리 구조를 생성하여 자바 개발자들이 파일 구조에 대해 이해가 쉽도록 구성되어 있습니다.

[추가] 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