Extjs Sample :: Viewport를 이용한 기본레이아웃잡기
Scripter/EXTJS / 2008. 2. 18. 19:57
Basic Concept
BCF
에서는 Ext.Viewport를 이용하여 Layout을 잡는것을 기본으로 한다. Ext.Viewport는 브라우저의
Viewport(<body></body>)영역에 자동으로 document Body에 렌더링하는 유틸리티
컨테이너 클래스이다. 브라우저의 크기가 변경되었을때 자동으로 레이아웃을 재계산하여 full-screen으로 렌더링한다.
주의 : Viewport는 document.body에 다른 어떤 container와 같이 렌더링 할수 없다. 페이지당 단 한개의 Viewport만 사용된다.
Region Concept
| north | ||||
| west | east | |||
| center | ||||
| south | ||||
브 라우저에서 위와 같이 그리드를 갖추고 있다고 하면 Viewport에서는 north, west,east,south,center 라는 영역(Region)을 갖는 5개의 Panel이 자동으로 생성된다. 위의 영역중 Center를 제외하고는 모두 Collapse/Expand 및 Hide/show 가 가능하다. 레이아웃을 생성할때에는 반드시 Center Region이 하나 이상(Center Region이 TabPanel 일 경우 여러개 존재) 존재하여야 한다.
기본적으로 아래 소스에서 사용되어질 레이아웃 종류는 BorderLayout이다. 이전 장을 반드시 숙지할것
최종 소스 : 다운로드
Step 1 : 기본 틀 잡기
각 소스는 이미 설명했던 0010. Basic Structure와 0020.Basic Format을 이용하여 재사용성을 고려하여 만든다.
basicLayout.html
<html>
<head>
<title>Basic Layout</title>
<link rel="stylesheet" type="text/css" href="http://techbug.tistory.com/resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="basicLayout.js"></script>
</head>
<body id="basicLayoutBody"></body>
</html>
basicLayout.js
//BasicLayout 기본 클래스를 정의한다.
BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border', //기본적으로 모든 viewport는 borderLayout으로 시작한다.
items : [
{
region : 'north', //상단 영역
title : 'NORTH', //상단 타이틀
collapsible : true, //상단 영역을 감추기 버튼 나타나기
height : 200, //상단 영역의 높이 (상/하단은 높이, 좌/우측은 너비)
split : true, //아래 영역과 splitting한다. (5px정도 차이를 둔다.)
layout : 'fit', //레이아웃 매니저는 fitLayout
html : '상단' //패널의 body HTML을 정의한다.
},
{
region : 'south',
title : 'SOUTH',
collapsible : true,
height : 200,
split : true,
layout : 'fit',
html : '하단'
},
{
region : 'east',
title : 'EAST',
collapsible : true,
width : 250,
split : true,
layout : 'fit',
html : '우측'
},
{
region : 'west',
title : 'WEST',
collapsible : true,
width : 250,
split : true,
layout : 'fit',
html : '좌측'
},
{
region : 'center', //Center Region의 경우 Width,Height를 표시하지 않는다. (상/하, 좌/우 패널에서 모두 정의된 높이/너비)
title : 'CENTER',
layout : 'fit',
html : '중간'
}
]
});
this.viewport.doLayout(); //viewport의 레이아웃을 그린다. (생략가능 : 되도록 작성 )
this.viewport.syncSize(); //viewport의 사이즈를 sync한다. (생략가능 : 되도록 작성 )
}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);
BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border', //기본적으로 모든 viewport는 borderLayout으로 시작한다.
items : [
{
region : 'north', //상단 영역
title : 'NORTH', //상단 타이틀
collapsible : true, //상단 영역을 감추기 버튼 나타나기
height : 200, //상단 영역의 높이 (상/하단은 높이, 좌/우측은 너비)
split : true, //아래 영역과 splitting한다. (5px정도 차이를 둔다.)
layout : 'fit', //레이아웃 매니저는 fitLayout
html : '상단' //패널의 body HTML을 정의한다.
},
{
region : 'south',
title : 'SOUTH',
collapsible : true,
height : 200,
split : true,
layout : 'fit',
html : '하단'
},
{
region : 'east',
title : 'EAST',
collapsible : true,
width : 250,
split : true,
layout : 'fit',
html : '우측'
},
{
region : 'west',
title : 'WEST',
collapsible : true,
width : 250,
split : true,
layout : 'fit',
html : '좌측'
},
{
region : 'center', //Center Region의 경우 Width,Height를 표시하지 않는다. (상/하, 좌/우 패널에서 모두 정의된 높이/너비)
title : 'CENTER',
layout : 'fit',
html : '중간'
}
]
});
this.viewport.doLayout(); //viewport의 레이아웃을 그린다. (생략가능 : 되도록 작성 )
this.viewport.syncSize(); //viewport의 사이즈를 sync한다. (생략가능 : 되도록 작성 )
}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);
Step 2 : 상/하단 및 우측 판넬 없애기
basicLayout.js
BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border',
items : [// Step 1에서 정의된 좌측 패널 :this.WestPanel = new Ext.Panel({
//Step1에서는 Default 값인 new Ext.Panel() 이 생략됨
region : 'west',
title : 'WEST',
collapsible : true,//초기 로딩시 collapse된 상태에서 보여진다.width : 250,
collapsed : true,
split : true,
layout : 'fit',
margins:'5 0 5 5',
cmargins : '5 5 5 5',
html : '좌측'
}),
this.CenterPanel = new Ext.Panel({
region : 'center',
title : 'CENTER',
layout : 'fit',
margins:'5 5 5 0',
html : '중간'
})
]
});
this.viewport.doLayout();
this.viewport.syncSize();
}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);
Step3 : 좌측 패널을 별도의 Class로 분리하여 빼내기
basicLayout.js
LeftArea = function(){
//기존 좌측 판넬의 config option을 그래도 호출하여 사용
LeftArea.superclass.constructor.call(this,{
region : 'west',
title : 'WEST',
collapsible : true,
collapsed:false,
width : 250,
split : true,
layout : 'fit',
margins:'5 0 5 5',
cmargins : '5 5 5 5',
html : '좌측'
});
};
Ext.extend(LeftArea, Ext.Panel,{
//Ext.Panel을 상속받아 사용하였다, GridPanel일 경우는
//Ext.grid.GridPane을 사용하듯이 여러 Panel정의하여 사용가능
//Left Area의 Public,Private,Privileged 메쏘드를 정의한다.
});BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border',
items : [
// LeftArea Class로 별도로 선언
this.WestPanel= new LeftArea(),
this.CenterPanel = new Ext.Panel({
region : 'center',
title : 'CENTER',
layout : 'fit',
margins:'5 5 5 0',
html : '<div id="_CONTENTS_AREA_">컨텐츠 영역입니다.</div>'
})
]
});
this.viewport.doLayout();
this.viewport.syncSize();
}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);
Step 4 : 좌측 패널에 ToolBar 붙여 오른쪽 패널의 Body를 Update하기
basicLayout.js
// 메인 클래스인 BasicLayoutClass를 인자로 넘겨받음 this.WestPanel = new LeftArea(this)
LeftArea = function(viewport){
// 인자로 받은 private변수를 public 변수로 변환
this.viewport = viewport;
// LeftArea에서만 사용가능한 private 변수
var privateNum = 0;
LeftArea.superclass.constructor.call(this,{
region : 'west',
title : 'WEST',
collapsible : true,
collapsed:false,
width : 250,
split : true,
layout : 'fit',
margins:'5 0 5 5',
cmargins : '5 5 5 5',
html : '좌측',
// 툴바 붙이기 TopToolbar의 경우 tbar, BottomToolbar의 경우 bbar로 표시
tbar : [
// 툴바 안의 액션버튼 붙이기 new Ext.Action({})으로 표기가 생략
{
text:'클릭하세요',
scope:this, //scope는 handler에서 사용할 이벤트영역 : this는 LeftArea 클래스를 가르킴
handler:function(){
privateNum++;// LeftArea 클래스의 private변수
this.viewport.updateBody(privateNum);// this.viewport로 BasicLayoutClass.viewport로도 가능
}
}
]
})
};
Ext.extend(LeftArea, Ext.Panel,{
//Left Area의 Public,Private,Privileged 메쏘드를 정의한다.
});
BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border',
items : [
this.WestPanel= new LeftArea(this), // 클래스 호출시 BasicLayoutClass를 인자로 넘겨줌
this.CenterPanel = new Ext.Panel({
region : 'center',
title : 'CENTER',
layout : 'fit',
margins:'5 5 5 0',
html : '<div id="_CONTENTS_AREA_">컨텐츠 영역입니다.</div>',
tbar : [
this.firstMenu = new Ext.Action({ // 좌측 판넬에서 정의했던 툴바를 선언하는 다른 방식
text:'좌측패널 보였다/안보였다',
scope:this,
handler:function(){
if(this.WestPanel.isVisible()){ // 좌측패널의 보였다/안보였다
this.WestPanel.collapse(true); // this.WestPanel로 좌측패널을 컨트롤
}else {
this.WestPanel.expand(true);
}
}
})
]
})
]
});
this.viewport.doLayout();
this.viewport.syncSize();
},
// 좌측 패널클래스 new LeftArea에서 직접 호출하는 Public Method
updateBody : function(privateNum){
Ext.get('_CONTENTS_AREA_').update('좌측판넬 클릭시 '+privateNum+'번 변했네요!');
}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);
LeftArea = function(viewport){
// 인자로 받은 private변수를 public 변수로 변환
this.viewport = viewport;
// LeftArea에서만 사용가능한 private 변수
var privateNum = 0;
LeftArea.superclass.constructor.call(this,{
region : 'west',
title : 'WEST',
collapsible : true,
collapsed:false,
width : 250,
split : true,
layout : 'fit',
margins:'5 0 5 5',
cmargins : '5 5 5 5',
html : '좌측',
// 툴바 붙이기 TopToolbar의 경우 tbar, BottomToolbar의 경우 bbar로 표시
tbar : [
// 툴바 안의 액션버튼 붙이기 new Ext.Action({})으로 표기가 생략
{
text:'클릭하세요',
scope:this, //scope는 handler에서 사용할 이벤트영역 : this는 LeftArea 클래스를 가르킴
handler:function(){
privateNum++;// LeftArea 클래스의 private변수
this.viewport.updateBody(privateNum);// this.viewport로 BasicLayoutClass.viewport로도 가능
}
}
]
})
};
Ext.extend(LeftArea, Ext.Panel,{
//Left Area의 Public,Private,Privileged 메쏘드를 정의한다.
});
BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border',
items : [
this.WestPanel= new LeftArea(this), // 클래스 호출시 BasicLayoutClass를 인자로 넘겨줌
this.CenterPanel = new Ext.Panel({
region : 'center',
title : 'CENTER',
layout : 'fit',
margins:'5 5 5 0',
html : '<div id="_CONTENTS_AREA_">컨텐츠 영역입니다.</div>',
tbar : [
this.firstMenu = new Ext.Action({ // 좌측 판넬에서 정의했던 툴바를 선언하는 다른 방식
text:'좌측패널 보였다/안보였다',
scope:this,
handler:function(){
if(this.WestPanel.isVisible()){ // 좌측패널의 보였다/안보였다
this.WestPanel.collapse(true); // this.WestPanel로 좌측패널을 컨트롤
}else {
this.WestPanel.expand(true);
}
}
})
]
})
]
});
this.viewport.doLayout();
this.viewport.syncSize();
},
// 좌측 패널클래스 new LeftArea에서 직접 호출하는 Public Method
updateBody : function(privateNum){
Ext.get('_CONTENTS_AREA_').update('좌측판넬 클릭시 '+privateNum+'번 변했네요!');
}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);
'Scripter > EXTJS' 카테고리의 다른 글
| Extjs를 이용한 에러핸들링 (2) | 2008.02.18 |
|---|---|
| Extjs 서로 다른 도메인일 경우 ScriptTagProxy를 이용한 Ajax통신 (5) | 2008.02.18 |
| Extjs Sample :: 기본문서구조만들기 (0) | 2008.02.18 |
| Extjs Sample :: 기본문서구조 (0) | 2008.02.18 |
| Extjs Qtips 사용하기 (0) | 2008.02.18 |