[ExtJS강좌 3] 레이아웃 잡아보기(2)

저번시간에는 extjs5에서 레이아웃 구조를 잡아보았습니다.

자 이번에는 레이아웃에 각각 타이틀을 적용해보고 접히는 기능, 중점을 드래그 해서 레이아웃 조절 하는 기능 등을 예제로 진행해보겠습니다~

ExtJS 가 제공하는 API 들이 무궁무진 하므로 문서페이지를 보면서 응용하시는것이 도움이 제일 되겠지요

저는 단순히 예제를 통해서 몇가지 옵션들만 제공하므로 문서를 보시면서 공부하시는것을 강추 드립니다!! +_+

 

밑에 주소는 ExtJS 5 document url이고, 이전 버전 url의 document를 보고 싶으신분들은

http://docs.sencha.com/ 에서 사용하고 계신 버전을 보시면서 공부하시면 되실겁니다.

http://docs.sencha.com/extjs/5.0.0/

 해당 url로 들어가시면 밑에 화면처럼 뜰텐데 Ext JS 5 Api Docs 메뉴를 클릭하시면 document 페이지로 화면이 나옵니다.

 

클릭을 해보면 우측상단에 검색창이 있는데 찾고자 하는 타입및 옵션을 검색하셔서 자동완성된 목록을 클릭해보시면

이벤트,환경설정,메소드등의 다양한 옵션들을 찾으실수 있습니다. 해당 찾는 방법은 추후에 진행 하도록 하겠습니다.

 

이어서 전에 layout : 'border'를 잡아줬던 소스에 추가로

레이어 열기/닫기, 타이틀 설정, 레이어 드래그해서 영역 재구성 에 대한 옵션을 잡아보도록 하겠습니다.

단 3줄로 끝이납니다.

레이어 열기/닫기 : collapsible: true

제목설정 : title : '타이틀에들어갈 제목'

레이어 드래그 : split : true

이걸로 끝입니다. 저는 중앙영역인 region : 'center' 를 제외한 나머지에  모두 넣어봤습니다.

영상 녹화하고 보니 east에는 split 옵션을 빼먹었네요 ..;;; ㅎㅎ

 

 

 

뭐 어쨋든 레이아웃 구성 완료네요 .. ㅎㅎ 

 

- 소스  -

Ext.onReady(function(){
   Ext.create('Ext.Viewport', {
    layout : 'border',
    items : [
     {
      flex: 1,
         region: 'north',
         border: true,
         title : '북',
         collapsible: true,
         split: true
         
     },
     {
      flex: 1,
         region: 'center',
         title : '중앙',
         border: true
     },
     {
      flex: 1,
         region: 'west',
         border: true,
         title : '서',
         collapsible: true,
         split: true
     },
     {
      flex: 1,
         region: 'east',
         layout: 'fit',
         border: true,
         title : '동',
         collapsible: true,
         split: true
     },
     {
      flex: 1,
         region: 'south',
         border: true,
         title : '남',
         collapsible: true,
         split: true
     }
    ]
   });
  });

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!