ExtJS6 다섯번째 강의 - 레이아웃 추가로 알아보자

▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼

https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ

ExtJS LAYOUT 종류

layout 의 종류는 fit, border , absolute, center, card, accordion, hbox, vbox 등 다양하게 레이아웃을 지원해주고 있어서 복잡하게 스타일을 정의하지 않아도 속성값을 정하기만 하면 알아서 구조를 잡아줌

① fit : 첫번째 자식 컴포넌트를 영역내에 가득채운다

별도의  width / height 속성을 주지 않아도 자식 컴포넌트가 브라우저 또는 부모 패널영역에 가득 채워짐

② border :  자식 컴포넌트에 선언되는 region 속성과 한쌍을 이뤄 영역나누기 쉽다

데스크탑용 설치형 어플리케이션 관련 레이아웃 구조를 잡을 때 필요한 레이아웃

③ absolute : 자식 컴포넌트들을 x,y 속성값을 이용하여 절대적인 위치에 배치

④ center :  자식 첫 컴포넌트를 layout center가 선언된 부모영억 정중앙에 배치

정 중앙 배치관련 로그인페이지에 적합

⑤ card : 카드를 여러장 겹쳐놓고 한장씩 화면에 표출

기본적으로 Sencha Touch 예제를 제공해주는 페이지를 보면, 화면 애니메이션 전환이 이루어 지면서 별도의 페이지가 출력되는데, 이런 경우가 바로 card 레이아웃을 이용한 것이다.

⑥ accordion : 하위 패널 모두를 펼쳐주는것이 아닌 하나의 패널씩 펼쳐주는 효과                       (나머지 패널은 타이틀만 표출됨)

⑦ hbox : 자식 컴포넌트들의 위치가 가로로 배치

⑧ vbox : 자식 컴포넌트들의 위치가 세로로 배치

⑨ table : HTML 테이블 태그와 유사한 템플릿 제작이 가능

오늘강좌에서 꼭 알아두어야 할 사항

레이아웃을 적용하고자 하는 부모컴포넌트한테 layout 속성을 정의를 해주어야 하위 컴포넌트들이 

정의한 레이아웃이 적용된다