Extjs 레이아웃에서 center region 숨기기 꽁수
Scripter/EXTJS / 2008. 2. 22. 13:29
기본적으로 ExtJS의 레이아웃을 잡을때 Center Region은 Hide/show 및 Collapse/Expand가 되지 않으나 해당 Center Region을 감추는 방법에 대해서 기술한다. (꼼수). 단, 해당 꼼수(^^)는 fullscreen이거나 전체 사이즈가 고정되어 있다고 전제하에 동작한다. 만약 좌측패널이 전체 화면으로 center region을 감췄을때 브라우저 사이즈를 줄이거나 한다면 다시 syncSize해줘야 한다.
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>
// body container의 id(basicLayoutBody)를 이용하여 전체 화면사이즈를 가져온다.
</html>
basicLayout.js
LeftArea = function(viewport) {
this.viewport = viewport;
LeftArea.superclass.constructor.call(this, {
region : 'west',
title : 'WEST',
width : 250,
layout : 'fit',
margins : '5 5 5 5',
html : '좌측',
tbar : [{
text : 'CenterPanel 없애기',
tooltip : {
title : '전체화면',
text : '화면을 전체/축소합니다.'
},
pressed : false,
enableToggle : true,
scope : this,
toggleHandler : this.showHideCenterRegion
}]
})
};
Ext.extend(LeftArea, Ext.Panel, {
// toggleHandler는 2개의 arguments를 가지고 있다. pressed는 클릭시 true , 그렇지 않을시 false반환
showHideCenterRegion : function(btn, pressed) {
if (pressed) {
var fullWidth = this.viewport.getFullBody('width') - 10;
this.setWidth(fullWidth);
this.viewport.CenterPanel.hide();
this.viewport.CenterPanel.ownerCt.doLayout();
} else {
this.setWidth(250);
this.viewport.CenterPanel.show();
this.viewport.CenterPanel.ownerCt.doLayout();
}
}
});
BasicLayoutClass = function() {
return {
init : function() {
Ext.QuickTips.init();
this.viewport = new Ext.Viewport( {
layout : 'border',
items : [this.WestPanel = new LeftArea(this),
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();
},
getFullBody : function(wh) {
if (wh == 'width')
return Ext.get('basicLayoutBody').getWidth();
else if (wh == 'height')
return Ext.get('basicLayoutBody').getHeight();
else
return Ext.get('basicLayoutBody').getWidth();
}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);
this.viewport = viewport;
LeftArea.superclass.constructor.call(this, {
region : 'west',
title : 'WEST',
width : 250,
layout : 'fit',
margins : '5 5 5 5',
html : '좌측',
tbar : [{
text : 'CenterPanel 없애기',
tooltip : {
title : '전체화면',
text : '화면을 전체/축소합니다.'
},
pressed : false,
enableToggle : true,
scope : this,
toggleHandler : this.showHideCenterRegion
}]
})
};
Ext.extend(LeftArea, Ext.Panel, {
// toggleHandler는 2개의 arguments를 가지고 있다. pressed는 클릭시 true , 그렇지 않을시 false반환
showHideCenterRegion : function(btn, pressed) {
if (pressed) {
var fullWidth = this.viewport.getFullBody('width') - 10;
this.setWidth(fullWidth);
this.viewport.CenterPanel.hide();
this.viewport.CenterPanel.ownerCt.doLayout();
} else {
this.setWidth(250);
this.viewport.CenterPanel.show();
this.viewport.CenterPanel.ownerCt.doLayout();
}
}
});
BasicLayoutClass = function() {
return {
init : function() {
Ext.QuickTips.init();
this.viewport = new Ext.Viewport( {
layout : 'border',
items : [this.WestPanel = new LeftArea(this),
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();
},
getFullBody : function(wh) {
if (wh == 'width')
return Ext.get('basicLayoutBody').getWidth();
else if (wh == 'height')
return Ext.get('basicLayoutBody').getHeight();
else
return Ext.get('basicLayoutBody').getWidth();
}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);
'Scripter > EXTJS' 카테고리의 다른 글
| Extjs Apatana ext2.0 plugin (0) | 2008.02.25 |
|---|---|
| Extjs Grid panel 및 데이타 축출하기 (8) | 2008.02.22 |
| Extjs 그리드안에서 프로세스바 구현하기 (3) | 2008.02.21 |
| Extjs 프로세스바 구현하기 (0) | 2008.02.21 |
| Extjs을 이용한 특정이벤트 컨텍스트 메뉴달기 (0) | 2008.02.21 |