→ ViewModel

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

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

→ ViewController

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

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

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

기본 구성 만들기

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: '도움말',
    }],
});

Untitled