블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

기본적으로 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);


Post by 넥스트리소프트 데꾸벅(techbug)
, |