MVC System

MVC의 정의

ExtJS 4 MVC에서의 M-V-C는 다음과 같이 정의된다.

Model : 모델은 필드들의 모임과 그 필드들의 데이타이다.가령 username과 passworld를 필드로 가지는 Usermodel을 그 예로 들 수 있다. 모델은 associations를 통하여 다른 모델들과의 연결을 가지게 되고 데이타 펙키지를 통하여 모델 자신의 데이타를 보관하는지 알고 있다.

View: View는 어떠한 종류의 컴포넌트를 의미한다. 가령 그리드, 트리, 페널과 같은 모든 UI컴포넌트 들이다.

Controller: Controller는 작성한 어플리케이션이 view들을 렌더링하고 모델을 초기화하며 이벤트들에 바인딩을 걸어 특정 어플리케이션의 로직을 담당하는 모든 코드를 담는 곳이다.

파일 구조

ExtJS 4 엎프리케이션은 아래와 같은 파일구조를 가지고 Model, Controller, View들을 물리적으로 분리한다.

아래는 위와 같은 구조에서의 index.html를 보여주고 있다.

<html>
<head>
    <title>Account Manager</title>

    <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">

    <script type="text/javascript" src="ext-4.0/ext-debug.js"></script>

    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

여기서 꼭 app.js가 아니라 해당 어플리케이션의 이름을 주어도 된다. 가령 투표app경우 voteApp.js가 될수도 있다.

app.js 분석

Ext.application({
    name: 'AM',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});

위의 코드를 보면 해당 어플리케이션의 이름은 AM이고 준비가 끝나면 launch의 함수를 호출하게 된다. appFolder의 경우 해당 어플리케이션의 모든 클래스들을 담고있는 디렉토리의 경로를 적어주면 된다. defaults는 app이다.

Controller

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
    }
})

위와 같이 컨트롤러 클래스를 정의하면 app.js에 아래와 같이 등록을 시켜주면 된다.

Ext.application({
    ...

    controllers: [
        'Users'
    ],

    ...
});