ExtJS 기초강좌 3 - ExtJS에서 지원하는 다양한 레이아웃(1)
ExtJS 자체적으로 지원하는 레이아웃 종류에 대해서 알아보도록 하겠습니다.
이번장에서 다루고자 하는 레이아웃의 종류는 다음과 같습니다. ▼
1. Absolute 레이아웃
2. Accordion 레이아웃
3. Border 레이아웃
4. Box 레이아웃
5. Card 레이아웃
6. Center 레이아웃
7. Column 레이아웃
Absolute 레이아웃
Ext.layout.container.Anchor 클래스의 고정을 계승하고, 표준적인 x/y 축의 config 옵션을 이용하여 X/Y 좌표로 위치 결정을 위한 기능을 추가한 레이아웃입니다.
▶ 샘플 코드
▶ 결과 화면
위 처럼 패널을 생성 후 layout의 속성을 "absolute'라고 준 후, x/y 에대한 위치값을 설정해주었습니다.
브라우저 및 새로고침을 해도 위치는 항상 동일한 위치에 출력되는 레이아웃입니다.
Accodion 레이아웃
하나의 패널에서 확대할 수 있도록 확장 가능한 아코디언 스타일로
여러개의 패널을 관리하는 레이아웃입니다.
▶ 샘플 코드
▶ 결과 화면
각 어코디언 스타일로 여러개의 패널들의 타이틀을 클릭하게 되면, 클릭한 패널에 대해서 활성화가 되고 그외의 나머지 패널들은 타이틀만 보여지고 비활성화가 되는 레이아웃 입니다.
Border 레이아웃
하나의 패널에 여러개의 중첩되는 패널이 존재하며, 확대 및 축소에 대한 자동바를 지원하는 멀티 윈도우 레이아웃입니다. 어플리케이션 제작에 자주 사용되는 UI 레이아웃 스타일입니다.
▶ 샘플 코드
▶ 결과 화면
위 코드에서 region 의 속성으로 각 위치를 결정 짓게 됩니다. 그리고 split에 대한 속성은 해당 위치하는 패널의 높이 및 넓이를 리사이즈가 가능합니다.
그리고 flex 속성은 상대적인 수직/수평의 공간을 계산하여 공간을 확보해주는 속성값입니다.
Box 레이아웃
HBoxLayout과 VBoxLayout 클래스의 기본 클래스
※ 일반적으로 직접 사용할 필요는 없습니다.
Card 레이아웃
이 레이아웃은 여러개의 자식 컴포넌트,를 임의의 시점에 표시할 수 있는 레이아웃입니다.
레이아웃 스타일은 가장 일반적인 클래스를 확장하거나 프로그램 설치화면인 마법사 또는 탭의 구현에 사용되는 레이아웃입니다.
▶ 샘플 코드
▶ 결과 화면
위 처럼 카드 레이아웃은 모바일에서도 자주 사용되는 레이아웃구조입니다.
코드에서 Next/Before 버튼 클릭시 페이지 전환 되는 부분에 추가로 첫번째 및 마지막 페이지일 경우 Toast Alert 창을 띄우도록 했습니다.
경고창부분에 대한 코드는 현재 이해하지 않으셔도 됩니다.
이후 자세하게 다룰테니 넘어가셔도 무관합니다.
Center 레이아웃
이 레이아웃은 컨테이너 안의 컨텐츠를 중심으로 사용합니다.
Fit 레이아웃의 Sub 클래스로 CenterLayout은 한개의 아이템을 가집니다.
여러개일 경우, 중복배치가되어 마지막 자식 컴포넌트만 화면에 출력이 됩니다.
▶ 샘플 코드
▶ 결과 화면
위와 같이 자식항목이 패널내의 정중앙의 위치하는 것을 확인 할 수 있습니다.
items내의 항목들을 여러개 지정해줘도 중첩이 됩니다.
Center Layout은 제공한다는 정도만 알아둡시다.
Column 레이아웃
이 레이아웃은 % 또는 고정폭으로 지정하여 여러개의 열 형식의 레이아웃을 작성하기 위한 최적의 레이아웃 스타일이지만, 높이는 컨텐츠에 의거하여 변화하는것이 허용됩니다.
▶ 샘플 코드
▶ 결과 화면
위와같이 폭을 고정하여 열에따라 별도의 컴포넌트 출력이 가능합니다.
하지만, 본인은 ColumnLayout을 추천하지는 않습니다.
차라리 Border Layout을 권하고 싶습니다.
남은 레이아웃 종류들에 대해서는 다음장에 이어서 진행하도록 하겠습니다.
