ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox)
지난 시간 모든 레이아웃을 소개하기에는 너무 길어질거 같아
남은 레이아웃에대한 포스팅을 이어서 진행하도록 하겠습니다.
Card와 Tab,Fit,HBox/VBox에 대한 소개 및 이해에 관하여 작성하도록 하겠습니다.
이번에 다룰 레이아웃에 대한 소개및 그외 레이아웃대한 소개글이 들어있는 이전 포스팅보러가기
이전 포스팅을 보시고 다루고자 할 레이아웃에 대한 이해를 하고 오셨나요?
그럼 본격적으로 진행을 해보도록 하겠습니다.
연동이 되지 않으신 분들은 하단 포스팅을 확인해주세요
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
Card Layout 샘플코드
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
//레이아웃유형 카드
layout : 'card',
width: 500,
height: 400,
items:[
{
title: '1page',
html: '첫페이지 나오는 컨텐츠영역'
},
{
title: '2page',
html: '두번째페이지 나오는 컨텐츠영역'
},
{
title: '3page',
html: '마지막페이지 나오는 컨텐츠영역'
}
],
fbar : [{
xtype : 'button',
text : '이전페이지',
handler : function(obj){
if(obj.up("panel").getLayout().getPrev()) {
obj.up("panel").setActiveItem(obj.up("panel").getLayout().getPrev());
}
}
},{
xtype : 'button',
text : '다음페이지',
handler : function(obj){
if(obj.up("panel").getLayout().getNext()) {
obj.up("panel").setActiveItem(obj.up("panel").getLayout().getNext());
}
}
}]
});
})
카드 레이아웃은 버튼 컴포넌트를 이용하여 화면을 이동을 해야 하기 때문에 panel 도화지를 이용하였습니다.
왜 계속 viewport만 사용하다 panel을 사용했느냐? 모르셔도 됩니다.
레이아웃의 강좌에서는 items와 layout 속성만을 익히시고 나머지 옵션들은 이후에 천천히 다루도록 하겠습니다.
fbar가 뭐고 handler안에 있는 함수들은 뭐지? 이 역시 모르셔도 됩니다.
너무 무심한거 아니냐고요?
이 포스팅에서는 각각의 레이아웃들의 의미를 이해하는것이 목적이므로 속성들에 대해서는 이후 다루도록 하겠습니다.
Card Layout 결과
카드레이아웃은 이전/다음페이지 버튼을 클릭하여 페이지 이동이 되시는것을 확인할 수 있습니다.
다음으로는 카드레이아웃(탭 레이아웃) 입니다.
카드레이아웃과 동일하지만 다른점이 있다면 탭레이아웃은 당연하겠지만 탭바가 존재한다는 것입니다.1
툴바에 버튼을 클릭하여 동일하게 이동이 가능하나 탭바가 있는데 궂이 툴바가 필요할까요?
코드를 먼저 보시죠
Tab Layout(다른말로 TabPanel) 샘플코드
Ext.onReady(function(){
//기존 card 레이아웃의 도화지가 일반 패널이었다면 tab은 layout 속성대신 Ext.tab.Panel이라는 탭도화지를 선언하면 됩니다.
Ext.create("Ext.tab.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 500,
height: 400,
items:[
{
title: '1page',
html: '첫페이지 나오는 컨텐츠영역'
},
{
title: '2page',
html: '두번째페이지 나오는 컨텐츠영역'
},
{
title: '3page',
html: '마지막페이지 나오는 컨텐츠영역'
}
]
});
})
위에 주석처럼 Tab레이아웃은 layout 속성을 변경하는것이 아니고
최상단 도화지의 컴포넌틑종류를 Ext.tab.Panel 적용을 해주는 것입니다.
Tab Layout(다른말로 TabPanel) 실행결과
다음 설명할 레이아웃종류는 Fit 입니다.
fit 레이아웃을 적용하게 되신다면 도화지의 자식의 레이아웃이 자동으로 width/height 100% 맞춰주는 레이아웃입니다.
Fit Layout 샘플코드
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 400,
height: 300,
//레이아웃 유형 fit
layout : 'fit',
items:[
{
title: '가득차는 자식레이아웃',
frame : true,
html: '자식레이아웃 1개만 부모레이아웃의 높이에 맞춰서 가득 채워집니다'
}
]
});
})
Fit Layout 실행결과
fit란?
부모 레이아웃의 높이가 얼마가 되었던간에 layout 속성값을 fit을 주게되면
무조건 자식의 width/height가 100%로 적용이 되는것이라고 이해하시면 되겠습니다.
단, 자식노드는 제일 처음에 정의된 1개로 100% 채워줍니다.
다음 그림을 참고하세요.
위 그림처럼 부모도화지에 layout:'fit' 을 지정해주게 되면 자식 패널이 가득 차게 되는 구조입니다.
만약 자식 레이아웃이 2개다? 그래도 방금 말씀드린것처럼 첫번째 자식 레이아웃만 가득차게 되며 두번째 자식 레이아웃은 화면에 나오지 않습니다.
위와같은 결과가 나오게 될것입니다 ^^
layout : 'fit' 속성을 준 자식 레이아웃은 한개만 지정이 가능하다만 기억하시면 되겠습니다.
그럼 layout : 'fit' 속성을 뭐하러 쓰느냐 라고 생각하실 분들이 계시겠지만
사용하다보면 layout : 'fit'은 필수(?)라고 할정도로 자주 쓰이니 기억해주세요.
마지막으로 소개할 레이아웃은 HBox/VBox 레이아웃입니다.
HBox : Horizon Box
VBox : Vertical Box
HBox는 가로로 패널들을 정렬시켜주는 레이아웃이고
VBox는 세로로 패널들을 정렬시켜주는 레이아웃입니다.
HBox Layout 샘플 코드
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 400,
height: 300,
//레이아웃 유형 fit
layout : 'hbox',
items:[
{
title: '가로정렬 자식레이아웃1',
flex : 1,
frame : true,
html: '가로정렬내용1'
},
{
title: '가로정렬 자식레이아웃2',
flex : 1,
frame : true,
html: '가로정렬내용2'
}
]
});
})
HBox Layout 실행 결과
위와 같이 HBox 타입으로 레이아웃 설정시 가로로 출력이 되는 것을 확인 하였습니다.
VBox는 위치변경만 될뿐이므로 layout : 'vbox' 속성은 별도로 확인해보시면 되겠습니다.
지금까지 레이아웃의 종류들을 알아보았습니다.
다음장에는 패널을 이용한 툴바의 위치설명 및 툴바에 생성된 버튼들의 태그 이벤트에 대해서 포스팅을 해보도록 하겠습니다.
by 개발로짜