ExtJS History

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

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

?

1 2 3 4 5

<!--html 파일에 아래 내용이 들어가야한다.-->     <form id="history-form" class="x-hide-display">         <input id="x-history-field">         <iframe id="x-history-frame"></iframe>     </form>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

// 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가 변경되었을 경우를 모니터링 해봅니다.

?

1 2 3 4 5 6 7 8 9

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를 조정하는 것입니다.

?

1 2 3 4 5 6 7 8 9 10

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"과 같이 코딩하고 클릭하면 해당 탭이 활성화 됩니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<h1><a href="#tab1">tab1</a></h1> <br> <h1><a href="#tab2">tab2</a></h1> <br> <h1><a href="#tab3">tab3</a></h1> <br> <h1><a href="#tab4">tab4</a></h1> <br> <h1><a href="#tab5">tab5</a></h1> <br>   <!-- Fields required for history management --> <form id="history-form" class="x-hide-display">     <input type="text" id="x-history-field">     <iframe id="x-history-frame"></iframe> </form>

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