ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기

이전 레이아웃 포스팅을 하면서 탭레이아웃 관련 내용을 다루었던 적이 있습니다.

2014/10/20 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox)

위 레이아웃 종류들중에서 탭패널을 동적으로 추가해보고자 합니다.

기존 탭패널 컴포넌트와 추가로 툴바에 버튼 하나를 생성을 해보도록 하겠습니다.

이번포스팅은 간단해서 내용이 짧으며 이해하시기도 쉬우실겁니다 ^^

탭패널컴포넌트 생성코드

Ext.onReady(function(){
	Ext.create("Ext.tab.Panel",{
		renderTo : Ext.getBody(),
		width: 500,
	    height: 400,
	    items:[
	           {
	               title: '1page',
	               html: '1페이지'
	           }
	     ],
	     fbar : [{
	    	 xtype : 'button',
	    	 text : '탭추가',
	    	 handler : function(btn){
	    		 //code here
	    	 }
	     }]
	});
})

실행해보면 다음과 같은 화면으로 컴포넌트 생성이 될겁니다.

위처럼 최초컴포넌트에는 1개의 탭만 존재합니다.

이제부터 툴바에 존재하는 "탭추가"버튼을 클릭하여 

동적으로 탭을 생성해보도록 하겠습니다.

상단 코드의 //code here 다음라인에 하단 코드를 추가해주세요

동적탭 추가기능을 위한 스크립트코드

var tab_count = btn.up("tabpanel").items.items.length+1;
var dynamictab = btn.up("tabpanel").add({
       title: tab_count+'page',
       html: tab_count+'페이지',
       closable : true,
})
 btn.up("tabpanel").setActiveTab(dynamictab);

스크립트 코드를 작성하였는데 각각에 대하여 설명을 드리겠습니다.

① tab_count :    셀렉터를 이용하여 탭패널객체를 찾은 후 현재 존재하는 탭패널갯수에 +1을 합니다

                        탭패널의 타이틀과 html영역부분에 숫자를 적용해보고자 샘플로 제작하였습니다.

② dynamictab : 탭패널객체.add() 함수는 탭내에 패널을 추가한다는 것입니다.

                        title/html은 아시겠고 closable 속성을 true로 주게 되면 탭에 X 표시가 같이 나오며 클릭시 

                       삭제기능을 제공합니다.

③ setActiveTab() : 마지막으로 추가한 패널에 포커스를 잡아주는 함수입니다.

다시한번 실행해보겠습니다.

위처럼 동적으로 생성되면 탭영역의 X버튼클릭하면 해당 탭이 삭제되는 기능까지 확인 할 수 있습니다.

by 개발로짜