ExtJS 기초강좌 4 - ExtJS에서 지원하는 다양한 레이아웃(2)
지난시간에 이어서 ExtJS에서 제공하는 다양한 레이아웃에 대하여 포스팅을 해보도록 하겠습니다.
이번장에 다루려는 레이아웃은 다음과 같습니다. ▼
1. Fit 레이아웃
2. Form 레이아웃
3. HBox/VBox 레이아웃
4. Table 레이아웃
Fit 레이아웃
자동으로 레이아웃내에 있는 항목들을 컨테이너 내에 가득채워지게 확장하는 레이아웃의 기본 클래스 입니다.
별도의 속성을 정의해서 구현할 필요가 없습니다.
▶ layout : 'fit' 적용 전 샘플 코드
▶ layout : 'fit' 적용 전 결과 화면
코드를 보시면 layout : 'fit' 코드를 임시로 주석 처리 후, frame : true 라는 속성이 추가로 작성해주었는데 해당 속성으로 패널의 프레임을 적용하기 위하여 임의로 작성하였습니다.
결과화면의 회색부분이 frame 속성이 적용된 예시입니다.
위 처럼 layout : 'fit'을 적용전에는 자식 패널이 출력된 컨텐츠 사이즈만큼밖에 높이가 지정되지 않고 있습니다.
하지만, layout 속성을 'fit'으로 주게된다면, 다음 코드 및 결과처럼 출력이 될 것입니다.
▶ layout : 'fit' 적용 후 샘플 코드
▶ layout : 'fit' 적용 후 결과 화면
실행결과, 내부의 자식패널이 부모의 패널사이즈내에 자동으로 가득채워지는 결과를 확인 할 수 있습니다.
Form 레이아웃
폼필드를 컨테이너 넓이에 맞춰지고, 렌더링을 하는 레이아웃입니다.
▶ 샘플 코드
▶ 결과 화면
폼 레이아웃은 회원가입 및 로그인과 같은 화면구성시 사용하면 유용할듯...
하지만 폼 패널 및 VBox/HBox 등의 레이아웃 및 컴포넌트 역시 사용가능합니다.
본인의 취향에 따라 사용유무를 결정하시면 될거 같습니다.
HBox/VBox 레이아웃
▶ layout : 'HBox' 샘플 코드
▶ layout : 'HBox' 결과 화면
▶ layout : 'VBox' 샘플 코드
▶ layout : 'VBox' 결과 화면
우선 HBox 레이아웃의 경우 왼쪽 → 오른쪽 방향으로 항목들이 쌓이는 것을 확인 할 수 있습니다.
단순히 layout : 'hbox'를 주어도 되지만, 추가 align 속성에 대하여 지정을 해주었는데 이부분은 layout : 'fit'과 비슷한 기능을 하도록 부모패널내에 자식 항목들이 채워지게끔 하기위해 적용하였습니다.
다음은 VBox 레이아웃의 경우는 위 → 아래 방향으로 항목들이 쌓였습니다.
각각의 자식 패널들의 넓이 및 높이를 다르게 적용해야 한다면 VBox 레이아웃을 이용하시면 되겠습니다.
Table 레이아웃
▶ 샘플 코드
▶ 결과 화면
위와 같이 html 태그와 동일하게 TABLE 태그와 흡사하면 ROWSPAN/COLSPAN을 자유롭게 사용할 수 있는것을 확인했습니다.
지금까지 패널에 사용되는 layout 속성에 대해서 알아보았습니다.
지금은 문법에 대해서 익숙 하지 않으실거라 생각되므로 다음 장은 기존 코드들을 인용하여 문법에 대해서 몇 가지 짚고 넘어가보도록 하겠습니다.
