자바스크립트/Ext JS2012. 1. 2. 21:27

이전 시간까지의 결과를 실행해 보면 크게 달라진것이 없습니다. 이제 탭이 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가 없으니 탭이 제대로 보여지지 않는것 같습니다.
Posted by 1 베니94

댓글을 달아 주세요