MVC System
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가 될수도 있다.
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이다.
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에서 확인할 수 있다.
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 클래스들을 지정하면 된다.