ExtJS History

오늘은 히스토리 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 
        }
    });
});

 

브라우저 "뒤로가기"버튼을 클릭 해보면 주소창의 #9가 0까지 변하는 것을 볼 수 있다. Ext.History.add(i) 이 부분을 실행 할 때 마다 브라우저에 #으로 add의 인자가 표시되는 것을 알 수 있다.

이제 코드를 좀 수정해서 ExtJs가 History가 변경되었을 경우를 모니터링 해봅니다.

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

브라우저를 통해 실행 해 봅니다. 뒤로가기 버튼을 클릭해서 console에 숫자가 찍히는지 확인 합니다. 이를 통해 extjs가 히스토리 객체에 특정 텍스트를 넣고 브라우저의 뒤로가기 버튼을 클릭하면 변경된 히스토리를 감시 할 수 있습니다.

다시 소스를 수정합니다. 이번에는 히스토리에 위의 그림에서 보이는 5개의 탭아이디를 저장하고 뒤로가기 버튼을 클릭해서 각 탭이 선택되도록 해보겠습니다. 사용자가 클릭하지 않고 히스토리를 통해 UI를 조정하는 것입니다.

    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));	// 아래쪽 탭들의 아이디와 매칭되도록 
    	}
    }

1

아래 그림처럼 뒤로가기 앞으로가기 버튼을 클릭할 때 마다 해당 히스토리에 맞게 탭에 활성화 되는 것을 확인 할 수 있습니다.

이제 좀 다르게 html에 링크를 만들고 해당 링크를 통해 탭을 활성화 해보겠습니다. href="#tab1"과 같이 코딩하고 클릭하면 해당 탭이 활성화 됩니다.

   
    
tab1
    

    
tab2
    

    
tab3
    

    
tab4
    

    
tab5
    

    
    
    

        
        
    

이런 식으로 히스토리에 UI의 아이디 등을 저장하고 사용자가 뒤로가기 또는 앞으로 가기 버튼을 클릭하면 ExtJS는 히스토리
변화를 감지하고 변경되었을 경우 해당 로직대로 화면을 보여줄 수 있도록 코딩하면 될 듯 싶습니다.