[ ExtJS ] 버튼을 클릭해 팝업창 띄우기 ExtJS Popup

이번 포스팅에선 버튼을 클릭하면 팝업창을 띄우고,

팝업의 각 속성들을 알아보는 내용을 다룬다.

style 은 classic/theme-crisp 를 사용 중이고 따로 올리진 않겠다.

먼저 이전 포스팅까지의 test.html 내용을 다 지우고

새로 단순 레이아웃 하나를 만들고 버튼 하나를 추가했다.

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ExtJS Test</title>
    <link href="../classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function(){
            Ext.create("Ext.panel.Panel",{
                renderTo : Ext.getBody(),
                title: 'Open the Popup!',
                width: 500,
                height: 400,
                items: [
                    {
                        xtype: 'button',
                        text: 'Open',
                        scale: 'large'
                    }
                ]
            });
        });
    </script>
</head>
<body>
    
</body>
</html>

test.html 실행 결과

이제 Open 버튼을 클릭하면 팝업 하나를 띄워보도록 할 것이다.

그 전에, 팝업을 만들 때 아래와 같은 방법을 이용한다는 걸 눈에 익혀두자.

1. 팝업이 생성될 때 자동으로 열리게 하는 방법

Ext.create('Ext.window.Window', {
    autoShow: true, //팝업이 생성된 후 자동으로 보여줌
    width: 200,
    height: 200,
    title: 'Popup Title',
    html: 'Popup Content'
});

2. 팝업을 생성한 후 show() 메서드를 호출해 열리게 하는 방법

//팝업을 변수에 담고
var popup = Ext.create('Ext.window.Window', {
                width: 200,
                height: 200,
                title: 'Popup Title',
                html: 'Popup Content'
            });

//팝업에 show() 호출
popup.show();

필자는 재사용성이 보다 효율적이도록 나은 2번 방법을 적용시킬 것이다.

솔직히 1번과 2번 둘 다 거기서 거기다.

자, 그럼 test.html 에 openPopup() 함수를 만들어 위에서 다룬 팝업 생성 구문을 구현하고,

Ext.onReady(function() {
    //...생략
});

function openPopup() {
    var popup = Ext.create('Ext.window.Window', {
                    autoShow: true,
                    width: 200,
                    height: 200,
                    title: 'Popup Title',
                    html: 'Popup Content'
                });
    
    popup.show();
}

openPopup() 을 button 에 event 로 추가해놓는다.

Ext.create("Ext.panel.Panel", {
    renderTo : Ext.getBody(),
    title: 'Open the Popup!',
    width: 500,
    height: 400,
    items: [
        {
            xtype: 'button',
            text: 'Open',
            scale: 'large',
            //이벤트 추가
            listeners: {
                click: function() {
                    openPopup();
                }
            }
        }
    ]
});

그 후 Open 버튼을 클릭하면 아래처럼 팝업이 뜨게 된다.

추가로 팝업의 속성들은 위에서 다룬 것 외에도 여러가지가 있는데,

그 중 몇 가지만 추가해보며 살펴보도록하자.

우선 test.html 의 팝업 생성 코드 내에 아래와 같이 네 가지 속성을 추가했다.

Ext.onReady(function() {
    //...생략
});

function openPopup() {
    var popup = Ext.create('Ext.window.Window', {
                    autoShow: true,
                    width: 200,
                    height: 200,
                    title: 'Popup Title',
                    html: 'Popup Content',
                    
                    //추가 속성
                    modal: true,
                    draggable: true,
                    resizable: true,
                    maximizable: true,
                });
    
    popup.show();
}

modal, draggable, resizable, maximizable 을 순서대로 기능을 확인해보도록 하자.

modal ( dafult false )

modal 은 팝업이 열렸을 때 부모 팝업의 활성화 여부를 다룬다.

modal 의 default 는 false 로 잡혀 있으며,

modal 이 true 라면 팝업을 호출한 부모창이 비활성화 되고,

modal 이 false 라면 팝업을 호출한 부모창이 활성화 된다.

draggable ( default true )

팝업을 마우스로 드래그해서 이동시킬 수 있는 기능을 담당한다.

draggable 의 default 는 true 로 잡혀 있으며,

draggable 이 true 라면 마우스로 팝업을 드래그해 이동할 수 있고,

draggable 이 false 라면 마우스로 팝업을 드래그해 이동할 수 없다.

resizable ( default true )

팝업의 사이즈를 마우스로 조절하는 기능을 담당한다.

resizable 의 default 는 true 로 잡혀 있으며,

resizable 이 true 라면 흔한 팝업들 처럼 마우스로 팝업 사이즈를 조절할 수 있고,

resizable 이 false 라면 마우스로 팝업 사이즈 조절이 불가능하다.

maximizable ( default false )

maximizable 은 열린 팝업을 브라우저의 사이즈만큼 확대 및 축소를 해주는 기능을 담당한다.

maximizable 의 default 는 false 로 잡혀 있으며,

maximizable 이 true 라면 아래처럼 아이콘이 추가로 생기는데,

이 아이콘을 클릭하면 브라우저의 사이즈만큼 팝업이 확대된다.

다시 아이콘을 클릭하면 원래대로 돌아온다.

이상으로, 버튼을 눌려 팝업창 띄우기 포스팅을 마칩니당.

test.html 최종 소스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ExtJS Test</title>
    <link href="../classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function(){
            Ext.create("Ext.panel.Panel",{
                renderTo : Ext.getBody(),
                title: 'Open the Popup!',
                width: 500,
                height: 400,
                items: [
                    {
                        xtype: 'button',
                        text: 'Open',
                        scale: 'large',
                        listeners: {
                            click: function() {
                                openPopup();
                            }
                        }
                    }
                ]
            });
        });

        function openPopup() {
            var popup = Ext.create('Ext.window.Window', {
                            autoShow: true,
                            width: 200,
                            height: 200,
                            title: 'Popup Title',
                            html: 'Popup Content',
                            draggable: true,
                            resizable: true,
                            maximizable: true,
                            modal: true
                        });
            popup.show();
        }
    </script>
</head>
<body>
    
</body>
</html>

저작자표시

'Coding Story > ExtJS' 카테고리의 다른 글

[ ExtJS ] Toolbar 를 생성하고 위치를 지정하기 (0)	2020.11.04
[ ExtJS ] Button을 만들고 Event Listeners 달기. (0)	2020.11.03
[ ExtJS ] ExtJS의 레이아웃 Layout (0)	2020.11.03
[ ExtJS ] ExtJS 기초 문법, 그리고 Border Layout. (0)	2020.11.02