ExtJS 기초강좌 12 - 탭패널(TabPanel) 에 대해서 알아보자

ExtJS 2015. 6. 12. 15:30

탭패널 내부에 여러 패널을 생성하여 탭별로 각 화면을 출력해보도록 하겠습니다.

탭 개념 ▼

하나의 영역에 여러개의 패널을 탭으로 나누어서 탭을 클릭할때마다 정의된 패널에 존재하는 화면이 각각 출력되는 것입니다.

1차적으로 제일 간단한 각 탭별로 패널을 출력해보도록 하겠습니다.

▶ 샘플코드


Ext.onReady(function(){
	Ext.create('Ext.tab.Panel',{
		width : 300,
		height : 300,
		items : [{
			title : 'TAB1',
			html : 'Tab1 Body'
		},{
			title : 'TAB2',
			html : 'Tab2 Body'
		}],
		renderTo : Ext.getBody()
	});
})

▶ 실행결과

[첫번째 탭]

[두번째 탭]

탭패널 컴포넌트 하위에 items config 속성에 2개의 패널을 추가하였습니다.

각 패널들의 title 영역이 탭바의 title부분을 표시합니다.

그리고 html에 들어간 컨텐츠 내용들이 각 패널의 body부분에 출력이 되는것입니다.

※ 탭패널 자체적으로 별도의 title config 설정도 해주셔도 무관합니다.

물론, html이 아니고 items를 이용하여 기타 ExtJS 컴포넌트들을 각 탭패널의 body영역에 출력을 시킬수도 있습니다.

샘플로 기존 샘플코드에서 첫번째 패널에 items로 변경하여 결과화면을 출력해보도록 하겠습니다.

▶ 샘플코드


Ext.onReady(function(){
	Ext.create('Ext.tab.Panel',{
		width : 300,
		height : 300,
		items : [{
			title : 'TAB1',
			items : [{
				xtype : 'button',
				text : 'Button Component'
			}]
		},{
			title : 'TAB2',
			html : 'Tab2 Body'
		}],
		renderTo : Ext.getBody()
	});
})

▶ 실행결과

실행결과 위와같이 TAB1 영역에 버튼컴포넌트가 출력되었습니다.

탭바 위치 변경

이어서 탭위치를 상/하/좌/우 4가지 영역으로 변경이 가능합니다.

저번처럼 여러개의 div태그를 생성 후 각 영역에 렌더링을 해보도록 하겠습니다.

각 탭패널 컴포넌트에 tabPosition 이라는 config 속성을 정해주시면 되겠습니다.

tabPosition에 value값은 다음과 같습니다.

tabPosition : 'top' or 'bottom' or 'left ' or 'right'

탭포지션을 이용하여 각 위치별로 탭바를 출력시켜보았습니다.

▶ 샘플코드


Ext.onReady(function(){
	Ext.create('Ext.tab.Panel',{
		width : 300,
		height : 300,
		//default(top)
		tabPosition : 'top',
		items : [{
			title : 'TAB1',
			html : 'Tab1 Body TOP'
		},{
			title : 'TAB2',
			html : 'Tab2 Body TOP'
		}],
		renderTo : document.getElementById("top")
	});
	Ext.create('Ext.tab.Panel',{
		width : 300,
		height : 300,
		tabPosition : 'bottom',
		items : [{
			title : 'TAB1',
			html : 'Tab1 Body BOTTOM'
		},{
			title : 'TAB2',
			html : 'Tab2 Body BOTTOM'
		}],
		renderTo : document.getElementById("bottom")
	});
	Ext.create('Ext.tab.Panel',{
		width : 300,
		height : 300,
		tabPosition : 'left',
		items : [{
			title : 'TAB1',
			html : 'Tab1 Body LEFT'
		},{
			title : 'TAB2',
			html : 'Tab2 Body LEFT'
		}],
		renderTo : document.getElementById("left")
	});
	Ext.create('Ext.tab.Panel',{
		width : 300,
		height : 300,
		tabPosition : 'right',
		items : [{
			title : 'TAB1',
			html : 'Tab1 Body RIGHT'
		},{
			title : 'TAB2',
			html : 'Tab2 Body RIGHT'
		}],
		renderTo :document.getElementById("right")
	});
})

▶ 실행결과