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을 권하고 싶습니다.


    남은 레이아웃 종류들에 대해서는 다음장에 이어서 진행하도록 하겠습니다.




    Posted by 몽고