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

일반 개발 프로젝트를 진행할때도 레이아웃 영역을 대부분 나눈다.

TOP/LEFT/RIGHT/CENTER/FOOTER 등등...

css랑 html태그, 스크립트등으로 레이아웃을 짜는데 extjs는 레이아웃작업들을 옵셜설정으로 

마무리 해준다.

기본적으로는 그림 그릴때 도화지가 필요하듯이

레이아웃을 짤때도 도화지가 필요하다

container, window, viewport, panel 등 여러가지가 있지만 본인은 viewport로 진행을 하겠다.

mvc 기반으로 본인은 extjs를 익혀서 최초 도화지는 viewport로 하는게 편함.. -_-;;

그리고 솔직히 다른놈들은 어떻게 자세히 써야 하는지 모르겠음... ㅠㅠ

우선 include파일은 첫회때 했던것이 전부라 별도로 없다.

화면은 포토샵이 없어서 그림판으로 대충 찍찍 그림

extjs는 좀더 좋은점이 그냥 영단어다... 

동,서,남,북,중간

아직 무슨 말을 하는지 이해가 안가실테니 우선 도화지(viewport)를 만들어 보겠음

Ext.onReady 내에 선언해주십쇼

      Ext.create('Ext.Viewport', {

      });

 

이렇게 하면 도화지 생성완료 json 틀이라는것을 명심하십쇼

자다음 저 레이아웃 영역을 나누는 옵션을 주어야 하는데 layout옵션에는 몇가지 옵션들이 있지만 저렇게 영역나누지 쉬운 

옵션명은  'border' 라는 놈입니다.

코딩으로 하면 

layout : 'border' 

그리고 화면들 각각의 레이아웃들을 아이템들이라 items라는 배열형 json에다 기술하시면 됩니다.

layout : 'border',

items : [

{

// 각각의 레이어 영역설정할 json

},

{

// 각각의 레이어 영역설정할 json

}

]

이런식으로 items라는 키내에 여러가지 레이아웃들을 넣어주면 됩니다.

layout을 'border' 라고 주셨으면 변수선언했듯이 난 이 뷰포트라는 도화지에 영역을 

나눌것이다~ 라는 의미입니다.

저렇게 줘봤자 화면에 아무런 변화가 없음 브라우저 하얀화면에 뷰포트라는 하얀 도화지만 올려놓고 레이어 나눌꺼예요~ 한거니... 

자 이제는 영역을 나눠 봐야겠지요

items json array에 영역 json object를 담아줘봅시다.

{

region : 'west'

}

이런형태로 영역을 나눠주면 된다 화면에 나와있는 영단어(소문자로 적을것)를 region이라는 옵션에 넣어주면 지가 알아서 

찍찍 그린다 ㅋㅋㅋ

region의 옵션값들은 north / center / west / east / south 이다.

Ext.create('Ext.Viewport', {
    layout : 'border',
    items : [
             {
                region : 'west'
             },{
                region : 'east'
             },{
               region : 'south'
             },{
               region : 'center'
             },{
               region : 'north'
            }
    ]
});

 

해당 소스로 이제는 영역이 나누어졌다 하지만 백날 실행해봐도 화면에 아무것도 안뜰것이다.

html 태그옵션중 <table border = "1"> 과 같이 

border : true 라는 옵션을 주고 각각의 json object들에게 flex : 1 옵션을 모두 지정해보자

예를들어 하나의 json object 객체로 설명을 하겠다.

{

flex: 1,

region: 'north',

border: true

}

이런형태가 되는것이다. 

<table> 태그에 border="1" width = "50%" 처럼 간격을 설정해주는것처럼

영역놈들도 flex은 간격에 관련된 설정이고, border는 굵기를 표시하는 옵션이다

border 옵션은 굳이 주지 않아도 되긴하지만 간격이 얼마나 되는지를 모르니 샘플로 넣어봤다.

자 이제 레이아웃 다짰다~~~ 

실행시켜봅시다!!

오~~ 나왔다!!

한 글에 내용이 너무 길면 쓰는사람도, 읽는사람도 지친다.. ㅋㅋㅋ

소스만 간략하게 붙이고 오늘은 여기까지!

다음에는 레이아웃들의 옵션을 가지고 장난질을 쳐볼것임...

 

Ext.onReady(function(){

Ext.create('Ext.Viewport', {

layout : 'border',

items : [

{

flex: 1,

   region: 'north',

   border: true

},

{

flex: 1,

   region: 'center',

   border: true

},

{

flex: 1,

   region: 'west',

   border: true

},

{

flex: 1,

   region: 'east',

   layout: 'fit',

   border: true

},

{

flex: 1,

   region: 'south',

   border: true

}

]

});

});

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