[ExtJS강좌 15]탭패널(tabpanel) - 첫번째 편

자바스크립트이야기/ExtJS

개발로짜 2014. 6. 30. 12:31

자 이번에는 탭패널에 대하여 설명을 하고자 한다.

탭패널의 장점은 탭별로 구분을 하여 역할을 나누는데 효율적이다.

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

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

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

첫번째 탭에는 6장에서 샘플링한 grid memory 타입을 출력할것이고

두번째 탭에는 9장 기본 폼들을 출력할 것이다.

2014/06/24 - [자바스크립트이야기/Ext JS] - [ExtJS강좌9] 폼을 화면에 출력하기 (1)

동적으로 추가되는 탭패널에 대해서는 다음장에 설명하도록 하겠다.

1. 탭패널에 대한 기본구조는 다음과 같다.

Ext.create('Ext.tab.Panel',{
	       renderTo : Ext.getBody(),
	       items : [
    				//각각의 탭을 넣어줄 영역
    			]
})

items json 배열속성안에다 각각 기술할것인대, formpanel과 grid memory 에대한 코드가

워낙 길다...

그러니 각각의 소스들을 가져와 변수에 담을것이다.

단, 각 코드들의 renderTo : Ext.getBody() << 요놈은 지우고 변수에 담자.

1. 그리드 패널에 대한 소스는 var grid 변수에 담아주고

* 탭패널에 대한 타이틀을 정의해주기 위하여 Ext.grid.Panel 속성중, title : '그리드샘플'

속성을 추가하자

이전글에서는 title 속성은 사용하지 않았음

2. form패널에 대한 소스는 var form 변수에 담아주자

(그리드,폼패널 둘다 renderTo 속성을 빼도록 하자)

1,2 번에 대한 코드는 해당 내용에서는 제외하도록 하겠다.

1,2번에 대한 코드를 각각의 변수에 대입하였다면

tabpanel -> items json 배열에 넣어주자

                       {
	                	xtype : grid	
	                },
	                {
	                	xtype : form
	                }

위의 json객체들을 items 속성에 넣게 되면 다음 화면처럼 출력이 되는것을 확인 할 수 있을것이다.

1. 첫번째 탭화면

2. 두번째 탭화면

와우 잘나온다 ㅎㅎㅎ

ExtJS MVC 패턴으로 하면 조금더 심플해지긴 하나....

우선은 컴포넌트 출력이해가 먼저라고 생각하므로 MVC에 대한 내용은 컴포넌트 강좌를

모두 마친후에 진행 하도록 하겠음

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

저작자표시