Sencha 화면 전환

https://wikidocs.net/2964

3.1 어플리케이션 아키텍처 소개

mainView를 변경하면 됨

# {app 이름}/app.js
---------------------
Ext.application({
    extend: 'genesis.Application',

    name: 'genesis',

    requires: [
        // This will automatically load all classes in the genesis namespace
        // so that application classes do not need to require each other.
        'genesis.*'
    ],

    // The name of the initial view to create.
    //mainView: 'genesis.view.main.Main',
    # 보여줄 화면의 클래스명을 기술
    mainView: 'genesis.view.login.Login',
});
---------------------

동적으로 변경 처리

# {app}/app/classic/src/view/login/Login.js
Ext.define('Genesis.view.login.Login', {
    extend: 'Ext.Container',
    xtype: 'app-login',
    controller: 'login',
    
    생략
                {
                    xtype: 'button',
                    text: 'LOG IN',
                    autoSize: true,
                    // LoginController 호출
                    handler: 'onLogin',
                    height: 30,
                    width: 280,
                    margin: '30 0 0 0',
                    style: {
                        'text-align': 'center',
                        'letter-spacing': '1.25px',
                        'font-size': '14px'
                    }
                },
    생략
});


# {app}/app/view/login/LoginController.js
Ext.define('Genesis.view.login.LoginController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.login',

    onLogin: function() {
    	# mainView 변경 요청
        Genesis.app.changeMainView('Genesis.view.main.Main');
    }
});


# {app}/app.js
Ext.application({
    extend: 'Genesis.Application',

    name: 'Genesis',

    requires: [
        // This will automatically load all classes in the Genesis namespace
        // so that application classes do not need to require each other.
        'Genesis.*'
    ],

    // The name of the initial view to create.
    mainView: 'Genesis.view.login.Login',

	// mainView를 변경하는 함수
    // 여기서 하지 않으면, 화면 크기 조정시 오류 발생함(tab title 사라짐)
    changeMainView: function(newMainView) {
        this.getMainView().destroy();
        this.setMainView(newMainView);
    }
});