[ExtJS강좌 16]탭패널(tabpanel) - 두번째 편 - 동적탭 추가하기

이번에 설명할 내용은 두개의 탭에 지금까지 배워온 내용중 일부를 삽입하여 

각각의 탭에 출력하도록 한다. 

ExtJS를 실행할 세팅이 안되있다면  다음링크를 따라서 준비하자

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

이전 15장에 대한 설명을 충분히 숙지하고 이어서 해당장을 보도록 하자

2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 15]탭패널(tabpanel) - 첫번째 편 - 탭 출력하기

이전까지 했던 고정 탭패널코드에 추가로 동적추가기능을 하는 함수를 넣을것이다.

항상 이벤트동작은 버튼 클릭으로 진행을 하겠죠잉?? 

fbar를 사용하여 버튼을 하단에 위치하도록 하겠다.

버튼 클릭시 이벤트에 대한 로직구현은 다음과 같다.

1. 현재 탭패널의 사이즈구하기 : 사용되는 부분에는 title구분값과 동적추가된후 추가된 탭에 focus를 맞춰주기 위해 사용된다.

2. 동적탭을 임의로 생성

3. 탭패널객체에 추가

4. 추가된 탭에 focus주기

이로직으로 진행된다.

버튼에 들어갈 소스는 다음과 같다.

 fbar: [{
  			   		xtype: "button",
  			   		text: "동적탭 추가", 
  			   		handler : function(btn){
  			   			//탭패널 object 찾기
  			   			var tabPanel = btn.up("tabpanel");
  			   			//탭갯수를 구한다.
  			   			var tabSize = tabPanel.items.length;
  			   			//동적으로 추가해줄 탭을 변수에 담는다.
	  			   		var dynamicTab ={
				            xtype        : 'panel',
				            title        : '동적탭'+tabSize,
				            closable	 : true,
				            //items를 넣어도 무관하나 sample이므로 html코드로 대체함
				            html : '동적탭탭'
	        			}
  			   			//동적추가할 탭을 탭패널 object에 추가
	  			   		tabPanel.add(dynamicTab);
  			   			//맨끝으로 focus 준다.
  			   			//해당함수를 사용안할시 포커스는 최종으로 활성화되있던 탭고정 
	  			  		tabPanel.setActiveTab(tabSize);
  			   		}
  }]

다음 로직을 구현하였다면 다음 화면과 같은 탭기능을 확인 할 수 있을것이다.

* 현재 이벤트에 대한 궁금함은 버리자 이벤트는 자바스크립트를 알고있다면  

  쉬우니 우선은 컴포넌트 생성에 대한 이해만 하도록 하자.. *

01234

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!