• MVC 대체하기 위한 아키텍처

• MVC : 각 뷰를 통제하는 controller를 제어하기 어렵고, view와 controller가 N:N구조로 만들어지다 보면 복잡

• Model과 Controller를 View에 종속적인 구조로 구성한 View기준 아키텍처.

• View가 종료되면 ViewController와 ViewModel은 같이 소멸.

→ ViewModel

뷰가 보여주는 화면을 대신.

통신을 위한 데이터 레이아웃이 아니다!

→ ViewController

뷰의 이벤트나 필요한 메소드를 구현해 view와 상호 연동.

전역적인 글로벌 controller와는 달리, 자신과 연결된 View에 한하며 이벤트나 참조 등의 구현이 단순

1. Reference 이용
2. 데이터 바인딩 이용 : viewModel의 데이터를 이용

기본 구성 만들기

• cmd창에 sencha generate app -ext MemberApp ./MemberApp

• cd MemberApp

• sencha app watch

• C:\Workspace\workspaceExtjs\MemberApp\app\view\main 경로에 Main.js 생성

Ext.define('MemberApp.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: 'border',  
    defaults: {
        border: true
    },
    items:[{
        region: 'north',
        height: 50,
        bodyStyle: 'background-color: black',
        html: '<h2><font color="white">&nbsp;&nbsp;&nbsp;회원관리</font></h2>',
    }, {
        region: 'west',
        title: '메뉴',
        html: '메뉴',
        collapsible: true,
        width: 200
    }, {
        region: 'center',
        xtype: 'tabpanel',
        name: 'mainbar',
        items: [
        {
            title: '메뉴1',
            html: '컨텐트 위치'
        }]
    }, {
        region: 'south',
        height: 30,
        html: '도움말',
    }],
});