오늘은 히스토리 Api에 대해 알아보겠습니다.
Doc App을 분석하다보니 History가 중요한 역할을 하고 있습니다.

예제를 통해 알아 보겠습니다.

// app.js
Ext.onReady(function() {
    Ext.History.init();
    var tokenDelimiter = ':';
    
    function onAfterRender() {
    	for(var i=0; i<10; i++){
//    	 Ext.util.History.add(i)
    	 Ext.History.add(i);	
    	}
    }
    
    Ext.create('Ext.TabPanel', {
        renderTo: Ext.getBody(),
        id: 'main-tabs',
        height: 300,
        width: 600,
        activeTab: 0,
        defaults: {
            padding: 10
        },
        
        items: [
        {
            title: 'Tab 1',
            id: 'tab1',
            html: 'Tab 1 content'
        },{
            title: 'Tab 2',
            id: 'tab2',
            html: 'Tab 2 content'
        },{
            title: 'Tab 3',
            id: 'tab3',
            html: 'Tab 3 content'
        },{
            title: 'Tab 4',
            id: 'tab4',
            html: 'Tab 4 content'
        },{
            title: 'Tab 5',
            id: 'tab5',
            html: 'Tab 5 content'
        }],
        listeners: {
            afterrender: onAfterRender 
        }
    });
});

    function onAfterRender() {
    	 Ext.History.on('change', function(token) {	// history 가 변경되었을 경우 감시할 리스너
    		 console.log(token);
    	 });
    	for(var i=0; i<10; i++){
//    	 Ext.util.History.add(i)
    	 Ext.History.add(i);	
    	}
    }

    function onAfterRender() {
    	 Ext.History.on('change', function(token) {	// history 가 변경되었을 경우 감시할 리스너
    		 console.log('History id ', token);
    		 Ext.getCmp('main-tabs').setActiveTab(Ext.getCmp(token));	// history값으로 탭이 선택되도록
    	 });
    	for(var i=0; i<5; i++){
//    	 Ext.util.History.add(i)
    	 Ext.History.add('tab'+(i+1));	// 아래쪽 탭들의 아이디와 매칭되도록 
    	}
    }

   
    
tab1
    

    
tab2
    

    
tab3
    

    
tab4
    

    
tab5
    

    
    
    

        
        
    

Ext.define("Docs.view.Viewport", {
..
..
    initComponent: function () {
    	this.items = [{
    		region: "north",
            id: "north-region",
            style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
            title: "north-region",
            height: 65,
            layout: {
                type: "vbox",
                align: "stretch"
            },
            items: [{
                height: 37,
                xtype: "container",
                layout: "hbox",
                items: [{
                	xtype: "docheader",
                	style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'}
                }, {
..

Ext.define("Docs.view.Header", {
    extend: "Ext.container.Container",
    alias: "widget.docheader",
    contentEl: "header-content", // index.html 내부의 header-content div를 현 클래스에 삽입.

// index.html
	

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       
 				}
 		));    
 	}

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

    
    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()
    },