Sencha 다른 resource 참조

name으로 참조

# 참조할 리소스에 name 적용
Ext.define('Home.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'main',

    requires: [
    ],

    title: 'Home',
    layout: 'border',
    items: [{
        region: 'north',
        height: 50,
        bodyStyle: 'background-color:black',
        html: '<h2><font color="white">&nbsp;&nbsp;Home</font></h2>'
    }, {
        region: 'west',
        width: 200,
        xtype: 'leftmenu',
    }, {
        region: 'center',
        xtype: 'tabpanel',
        // 다른 곳에서 참조할 리소스에 name 정의
        name: 'content',
        items: [{
            title: 'Main'
        }]
    }]
});

# 다른 곳의 리소스 참조
Ext.define('Home.controller.AppController', {
    extend: 'Ext.app.Controller',
    config: {
    	// 다른 resourc를 참조하기 위한 정의
        refs: {
        	// name을 통해서 resource 참조
            // xtype='main'인 객체에서 xtype='tabpanel'인 객체 중에 name='content'인 resource 참조
            content: 'main tabpanel[name=content]',
        }
    },

    setContent: function(url, title) {
        let content = this.getContent();
        let findTitle = false;
        for(i=0; i< content.getTabBar().items.items.length; i++) {
            let tabTitle = content.getTabBar().items.items[i].title;
            if(title == tabTitle) {
                content.getLayout().setActiveItem(i);
                findTitle = true;
                break;
            }
        }

        if(findTitle == false) {
            let panel = Ext.create(url, {
                title: title,
                autoShow: true,
                autoDestory: true
            });
            content.add(panel);
            content.getLayout().setActiveItem(panel);
        }
    }
})