Skip to content
haibane84 edited this page Mar 22, 2012 · 8 revisions

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'
    ],

    ...
});

applicaiton에 컨트롤러를 등록하게되면 Users 컨트롤러 클래스가 로드가되면 Users 컨트롤러 클래스의 init메소드가 applicaiton의 launch클래스 보다 먼저 호출이 된다.

extend: 'Ext.app.Controller'

모든 Controller 클래스는 반드시 Ext.app.Controller을 확장하여야 한다. ExtJS는 이처럼 베이스 클래스를 제공하고 이를 확장하여 어플리케이션에 필요한 컨트롤러, 모델, 스토어, 뷰를 정의하게 된다.

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

    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

위를 보게되면 init콜벡함수 안에 this.control을 호출하게 된다. 여기에 config 오브젝트를 넣어주게 되는대 여기의 key에는 컴포넌트 쿼리를 적어줄 수 있다. 컴포넌트 쿼리에 대하여는 ComponentQuery documentation에서 확인할 수 있다.

View 정의

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : 'All Users',

    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: 'Ed',    email: '[email protected]'},
                {name: 'Tommy', email: '[email protected]'}
            ]
        };

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

View 클래스들은 특정 컴포넌트를 확장한 클래스들이다. 대부분 Panel클래스를 기본적으로 확장하고 내부에 여러 컴포넌트들을 포함하게 된다. 위 처럼 View 클래스를 정의하였으면 아래와 같이 컨트롤러에서 사용될 View 클래스들을 지정하면 된다.

Clone this wiki locally