Extjs Windows 사용법 상세 정보

오늘은 Extjs에서 자주 사용하는 컨트롤 윈도우를 소개합니다.윈도우의 역할은 페이지에 창을 만드는 것입니다. 이 창은 용기로grid,form 등 컨트롤을 추가하여 더욱 복잡한 인터페이스 논리를 실현할 수 있습니다.
본고의 예시 코드는 Extjs4에 적용된다.x 및 Extjs 5.x, Extjs 4.2.1 및 Extjs 5.0.1에서 직접 측정할 수 있습니다!
본문은 제비([email protected]) 및http://www.qeefee.com/article/extjs-window-in-detail, 전재 출처를 밝히세요!더 많은 Extjs 강좌, Extjs5 강좌 추천

Extjs 창 만들기

Extjs Windows를 만드는 코드는 다음과 같습니다.

// window
var win = Ext.create("Ext.window.Window", {
    id: "myWin",
    title: " ",
    width: 500,
    height: 300,
    layout: "fit",
    items: [
        {
            xtype: "form",
            defaultType: 'textfield',
            defaults: {
                anchor: '100%',
            },
            fieldDefaults: {
                labelWidth: 80,
                labelAlign: "left",
                flex: 1,
                margin: 5
            },
            items: [
                {
                    xtype: "container",
                    layout: "hbox",
                    items: [
                        { xtype: "textfield", name: "name", fieldLabel: " ", allowBlank: false },
                        { xtype: "numberfield", name: "age", fieldLabel: " ", decimalPrecision: 0, vtype: "age" }
                    ]
                }
            ]
        }
    ],
    buttons: [
        { xtype: "button", text: " ", handler: function () { this.up("window").close(); } },
        { xtype: "button", text: " ", handler: function () { this.up("window").close(); } }
    ]
});

코드의 Form은 Extjs Form 사용 설명 을 참조할 수 있습니다.다음과 같은 효과를 표시합니다.

Extjs 창 표시

위의 코드를 사용하여 만든 윈도우는 표시되지 않습니다. 윈도우만 만들었을 뿐, 이 윈도우는 기본적으로 표시되지 않습니다.
이를 표시하려면 다음과 같은 코드로 구성 항목에 autoShow를 추가할 수 있습니다.

autoShow: true,

또는 윈도우를 호출하는 show 방법을 표시할 수 있습니다.

win.show();

모드 창 만들기

Extjs Windows는 모드 창으로도 열 수 있습니다.모드 창은 무엇입니까?모드 창을 열 때, 모드 창만 조작할 수 있으며, 그 뒤에 있는 물건은 모두 가려져서 조작할 수 없게 된다.
Extjs에서는 윈도우의 설정 항목을 수정하여 모드 창을 만들 수 있습니다.

modal: true,

닫기 버튼 및 닫기 동작

Extjs Windows에서 닫기 버튼을 표시할지 여부를 구성할 수 있습니다.

closable: false,

Extjs Windows를 닫을 때 설정 항목closeAction을 통해 단추를 삭제(destroy)할지 숨기기(hide)할지 제어할 수 있습니다. 기본적으로 삭제합니다.

closeAction: "hide",

최대화 및 최소화

Extjs Windows의 최대화 및 최소화 버튼은 구성 항목에 표시됩니다.

maximizable: true,
minimizable: true,

효과는 그림과 같습니다.
우리가 최대화 단추를 눌렀을 때 창이 전체 화면으로 변한다.
그러나 최소화 단추를 눌렀을 때 창에 아무런 조작이 없는 이유는 무엇일까?API에 따르면 최소화 버튼은 어떠한 작업도 수행하지 않았으며, 최소화 작업을 수행하기 위해 minimize 이벤트를 처리해야 합니다.

listeners: {
    minimize: function (win, opts) {
        win.collapse();
    }
},

위의 코드를 통해 우리는 최소화 단추를 눌렀을 때 윈도우를 접을 수 있다.

Extjs 창에 iframe 표시

Windows에서 Extjs 컨트롤을 추가할 수도 있고 html 코드를 표시할 수도 있습니다.우리는 html 설정 항목을 통해 iframe을 윈도우에 추가할 수 있습니다.

var win = Ext.create("Ext.window.Window", {
    id: "myWin",
    title: " ",
    width: 500,
    height: 300,
    layout: "fit",
    autoShow: true,
    html: '<iframe style="overflow:auto;width:100%; height:100%;" src="http://www.qeefee.com" frameborder="0"></iframe>',
});

다음과 같은 효과를 표시합니다.

Extjs Windows에 HTML 큰 세그먼트 표시

html 설정 항목은 우리가 윈도우즈에서 비교적 간단한 html 코드를 표시하는 데 도움을 줄 수 있다. 너무 복잡한 html를 표시하려면 js 코드에 쓰는 것은 조직과 유지보수에 불리하다.
그러면 큰 html을 표시하려면 html 코드에 미리 쓴 다음 contentEl 설정 항목을 통해 윈도우에 표시할 수 있습니다.
먼저 html에 코드를 추가합니다.

<div id="content">
    <h2> Extjs </h2>
    <p>
         Extjs ， <a href="http://www.qeefee.com/zt-extjs">http://www.qeefee.com/zt-extjs</a>
    </p>
</div>

그리고 윈도우에 설정 항목을 추가합니다.

// window
var win = Ext.create("Ext.window.Window", {
    id: "myWin",
    title: " ",
    width: 500,
    height: 300,
    layout: "fit",
    autoShow: true,
    contentEl: "content"
});

다음과 같은 효과를 표시합니다.
이런 방식은 먼저 html 요소를 바디에 그린 다음에 바디에서 윈도우 용기로 이동하기 때문에 반짝이는 현상을 일으킬 수 있다.
반짝임을 해결하는 방법은 먼저 div를 숨기고 윈도우로 이동한 후에 표시하는 것입니다.extjs도 이 문제를 고려하여 두 개의 cssclass를 제공했다. 각각 x-hidden과 x-hide-display이다. 우리는 임의의 cssclass를 요소에 추가할 수 있고 문제는 해결될 것이다.
만약 이 글이 당신에게 도움이 된다고 생각한다면, 잊지 말고 지지하세요!
저자: 제비
출처:http://youring2.cnblogs.com/
성명: 본 블로그의 오리지널 문자는 본인의 업무 중 어느 한 시간 안에 정리한 관점이나 결론을 대표할 뿐 본인이 있는 부서와 직접적인 이익 관계가 없다.비상업적, 권한이 부여되지 않았습니다. 스티커는 현재 상태로 남겨 주십시오. 전재할 때 이 단락의 성명을 보류하고 문장 페이지의 뚜렷한 위치에 원문 연결을 해야 합니다.
분류: ExtJS