Ext JS 4.1 beta Doc 어플리케이션 분석6

이전 시간까지의 결과를 실행해 보면 크게 달라진것이 없습니다. 이제 탭이 doctab영역에 보여지도록 해보겠습니다.
Docs.Application 클래스에 3개의 컨트롤러를 등록 하였습니다. 이 중에서 Tabs만 onLaunch가 구현되어 있습니다. onLaunch메소드는 init메소드와 동일하지만 조금 다른 듯합니다. 어찌되었든 init메소드가 호출되고 그 다음 onLaunch메소드가 호출되고 있습니다. Tabs 컨트롤러를 봅시다.

Ext.define("Docs.controller.Tabs", {
...    
	refs: [{        
		ref: "doctabs",		// this.getDoctabs()로 접근이 가능하다. 하단에서.        
		selector: "#doctabs"    
	},{        
		ref: "welcomeIndex",	// this.getWelcomeIndex()로 접근      
	  	selector: "#welcomeindex"    
	}, {      
	  	ref: "classIndex",		// this.getClassIndex()로 접근        
		selector: "#classindex"    
	}]
....    
	onLaunch: function () { 	// init 이 후 호출    	
		this.getDoctabs().setStaticTabs(Ext.Array.filter([	    											
							this.getWelcomeIndex().getTab(),     											
							this.getClassIndex().getTab()],     											
				function (a) {            
					a       
 				}
 		));    
 	}

onLaunch메소드 내부의 this.getWelcomeIndex().getTab()로 접근이 가능한 것은 ref로 참조를 하고 있기 때문이다. 아래 처럼 말이죠

// app/view/welcome/Index.js  
     getTab: function () {
        return this.hasContent ? {
            cls: "index",
            href: "#",
            tooltip: "Home"
        } : false
    }
 

Tab Controller가 하는 역할은 각각의 view를 탭에 표현되도록 하는 것입니다. 위의 onLaunch의 this.getDoctabs().setStaticTabs()는 Doc.view.Tabs 클래스의 함수입니다. 해당 클래스의 init와 setStaticTabs함수를 아래와 같이 구현해야한다..

    
    initComponent: function () {	
    	// XTemplate을 통해 루프돌며 탭을 보여질 수 있도록 구성해놓는다.
    	this.tpl = Ext.create("Ext.XTemplate", '', 
    						'
', '
', 
    						'
 
', 
    						'
', "
", "", 
    						'
 
', '
');
        this.html = this.tpl.applyTemplate(this.staticTabs);
        this.tabTpl = Ext.create("Ext.XTemplate", '
', '
', 
        		'
', ' ', 
        		'{text}', "
", 
        		'
 
', "
");
        this.callParent()
    },
    setStaticTabs: function (b) {
    	console.log(b);
        this.staticTabs = b;
        this.refresh()
    },
    refresh: function () {
        var i = this.tpl.applyTemplate(this.staticTabs);
        var f = this.maxTabsInBar() < this.tabs.length ? this.maxTabsInBar() : this.tabs.length;
        this.tabsInBar = this.tabs.slice(0, f);
        for (var j = 0; j < f; j++) {
            var h = this.tabCache[this.tabs[j]];
            var g = Ext.apply(h, {
                visible: true,
                active: this.activeTab === h.href,
                width: this.tabWidth()
            });
            i += this.tabTpl.applyTemplate(g)
        }
        this.el.dom.innerHTML = i;
        if (this.activeTab && this.activeTab !== this.tabs[f - 1]) {
            this.activateTab(this.activeTab);
            Docs.History.push(this.activeTab)
        }
        //this.highlightOverviewTab(this.activeTab);
        //this.createOverflow();
        //this.addToolTips()
    },

이제 실행하면 아래와 같은 화면을 볼수 있습니다. 별로 변한건 없고 좌측 "탭영역"이라는 문구가 사라졌습니다. 아마도 css가 없으니 탭이 제대로 보여지지 않는것 같습니다.