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 속성을 정의를 해주어야 하위 컴포넌트들이 

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


    Posted by 몽고