제5장 껑충껑충 뛰자!모든 팝업 창을 벗어났습니다.

5.1.허허~ 튀어나와 움츠러들면 항상 놀라운 느낌을 준다.

 
브라우저 원음의alert (),confirm (),prompt () 는 이렇게 초라해 보이고 유연하게 설정할 수 없다. 예를 들어 언제 단추를 추가하고 싶은지, 단추를 삭제하고 싶은지, 단추를 누르면 발생하는 이벤트를 고치는 것은 더할 나위 없이 어려운 일이다.
그렇다면 왜 ext가 제공하는 대화상자가 다릅니까?저렇게 예쁘고, 저렇게 설정이 좋고, 끌 수도 있고, 아무 물건을 넣을 수도 있고, 안에서 어떤 컨트롤을 사용하든지, 심지어tab를 몇 개 놓아서 마구 전환할 수도 있고, 창을 최소화하는 기능까지 제공한다.하하, 신기하네. 알러트를 은퇴시킬 수 있을 거야.

5.2.일단 가장 기본적인 세 가지 예를 볼게요.

 
헤헤, 인식을 깊이 있게 하기 위해서, 우선 examples의 예를 보러 가자.1.x는 dialog 디렉토리에 있습니다.2.0은 메시지-box 디렉터리에 있습니다.

5.2.1. Ext.MessageBox.alert()

 

Ext.MessageBox.alert(' ', ' ', function(btn) {
    alert('  ' + btn);
});

이제 첫 번째 파라미터를 통해 창의 제목을 수정할 수 있습니다. 두 번째 파라미터는 창의 내용을 결정합니다. 세 번째 파라미터는 단추를 닫은 후(ok 단추를 누르든 오른쪽 상단에 닫는 작은 포크를 누르든) 실행되는 함수입니다. 헤헤, 전설의 리셋 함수입니다.

5.2.2. Ext.MessageBox.confirm()

 

Ext.MessageBox.confirm(' ', ' yes no？', function(btn) {
    alert('  ' + btn);
});

yes나 no를 선택하고 리셋 함수에서 도대체 어느 것을 선택했는지 알 수 있습니다.

5.2.3. Ext.MessageBox.prompt()

 

Ext.MessageBox.prompt(' ', ' ', function(btn, text) {
    alert('  ' + btn + '，  ' + text);
});

아무렇게나 몇 글자를 입력한 후에 버튼을 누르면 무엇을 입력했는지 알려줄 것이다

5.3.하면, 만약, 만약...

 

5.3.1.여러 줄을 입력할 수 있는 입력 상자

 

Ext.MessageBox.show({
    title: ' ',
    msg: ' ',
    width:300,
    buttons: Ext.MessageBox.OKCANCEL,
    multiline: true,
    fn: function(btn, text) {
        alert('  ' + btn + '，  ' + text);
    }
});

사실은show만 있으면 다양한 창을 만들 수 있습니다.title은 제목을 대표하고 msg는 출력의 내용을 대표합니다.buttons는 디스플레이 단추입니다.multiline는 우리에게 몇 줄을 입력할 수 있음을 알려주고 마지막으로 fn이라는 리셋 함수로 우리가 원하는 결과를 받아들일 수 있습니다.

5.3.2.예를 하나 더 볼게요.

 
쇼라는 방법에 대한 이해를 더 깊게 할 수 있을 것 같아요.

Ext.MessageBox.show({
    title:' ',
    msg: ' ',
    buttons: Ext.MessageBox.YESNOCANCEL,
    fn: function(btn) {
        alert('  ' + btn);
    }
});

나는 buttons라는 매개 변수가 하나의 수조라고 믿는다. 안에 있는 이 매개 변수는 어떤 단추를 표시해야 하는지 절대적으로 보여 준다. Ext. MessageBox는 우리에게 미리 정의된 조합을 제공했다. 예를 들어 YESNOCANCEL, OKCANCEL, 직접 사용할 수 있다.

5.3.3.다음 예는 진도표입니다.

 
실제로progress라는 속성을true로 설정하면 대화상자에 줄을 표시합니다.

Ext.MessageBox.show({
    title: ' ',
    msg: ' ',
    width:240,
    progress:true,
    closable:false
});

진도표 보셨죠? 그런데 자동으로 꺼지지 않아요. Ext. MessageBox를 호출해야 해요.updateProgress는 진행률 표시줄을 변경합니다.
그리고 한마디 더 하자면,closable:false는 대화상자 오른쪽 상단의 작은 포크를 숨깁니다. 그러면 우리는 그것을 마음대로 끌 수 없습니다.
이제 업데이트 진도표의 함수를 추가하고timeout을 사용하여 정시 업데이트를 하면 효과를 볼 수 있습니다.허허~ 효과가 정말 좋군, 이렇게 하면 우리 앞으로 진도표를 사용할 수 있을 거야.

var f = function(v){
    return function(){
        if(v == 11){
            Ext.MessageBox.hide();
        }else{
            Ext.MessageBox.updateProgress(v/10, '  ' + v + '  ， 10 。');
        }
   };
};
for(var i = 1; i < 12; i++){
   setTimeout(f(i), i*1000);
}

5.3.4.애니메이션 효과

 
대화상자가 버튼 하나에서 튀어나온 것 같아서 닫을 때 스스로 움츠러들게 하는 효과가 뛰어나다.너는 그것이 어렸을 때부터 커졌고, 또 큰 것에서 작아졌으며, 마지막에 보이지 않는 것을 볼 수 있다.실제 설정은 매우 간단합니다. animEl을 추가하세요.위에 있는 세 개의 단추의 예가 어떻게 변할지 봅시다.

Ext.MessageBox.show({
    title:' ',
    msg: ' ',
    buttons: Ext.MessageBox.YESNOCANCEL,
    fn: function(btn) {
        alert('  ' + btn);
    },
    animEl: 'dialog'
});

animEl의 값은 html에 있는 요소의 id에 대응하는 문자열입니다. 예를 들어 입니다.이것을 지정해야만 우리의 대화상자는 어느 요소에 따라 전개되고 닫힌 애니메이션을 재생하는지 알 수 있다.
이렇게 하면 우리는 애니메이션 효과를 얻을 수 있다. 헤헤, 애니메이션 효과의 그림을 끊을 수 없으니 모두 스스로 보러 가자.
이상의 예는 examples에서 모두 찾을 수 있지만, 우리도 자신의 예를 제공한다.x은lingo-sample/1.1.1/05-01.html.2.0 lingo-sample/2.0/05-01.html.
좋은 소식은 이 부분의api는 아무런 변화가 없다는 것이다.그러나 표현 형식에 약간의 차이가 있다. 만약에 내가 예에서 쓴 것처럼 한 번에 N개의 MessageBox를 생성하면 마지막 대화상자만 표시할 수 있다.
하지만x에는 데이터 동기화 문제가 뚜렷하다. 1.x의 updateProgress는 다른 대화상자의 msg에도 영향을 주고 마지막 대화상자를 닫을 수 있습니다.2.0리는 적어도 좋다.

5.4.팝업 창에 우리가 원하는 것을 표시합니다. 예를 들어 표

 
2.0 이 작업을 수행하려면 윈도우가 필요합니다. 1.X 버전의 BasicDialog는 나중에 추가됩니다.

5.4.1.2.0 팝업 표입니다.

 
윈도우 어떻게 쓰는지 살짝 말씀해 주시겠어요?사실 Message Box와 차이가 별로 없어 보여요. 그냥 안에 아무거나 넣을 수 있을 뿐이에요. 이제 단순한 예를 볼게요.

var win = new Ext.Window({
    el:'window-win',
    layout:'fit',
    width:500,
    height:300,
    closeAction:'hide',

    items: [{}],

    buttons: [{
        text:' '
    }]
});
win.show();

먼저 설명해야 할 것은 이 윈도우에 대응하는 div가 필요하다는 것이다. 엘에 대응하는'윈도우-win'처럼 이 div의 id는'윈도우-win'과 같아야 한다. 그리고 넓이와 높이를 설정하면 모두 밝다.
그 다음에 설정해야 할 것은 레이아웃 형식입니다.layout:'fit'은 레이아웃이 전체 윈도우의 크기에 적응할 수 있음을 설명하고 크기를 바꿀 때도 응답의 변화를 해야 합니다.
closeAction:'hide'는 미리 설정된 값입니다. 간단하게 말하면 오른쪽 상단의 포크를 마우스로 눌렀을 때 어떤 동작을 수행할지 알 수 있습니다. 여기는 숨겨져 있습니다.왜 숨겼냐고요?왜냐하면, 미리 설정했기 때문에, 착해, 외워서.
items 부분, 헤헤~ 우리 윈도우에 무슨 내용이 있는지 알려주는 거예요.여기에 표를 놓고, 나무 모양을 놓고, 호호.
buttons에서 밑에 표시되는 단추를 설정합니다.우리는 한번 해 보려고 버튼을 눌렀지만 반응이 없었다. 헤헤.
마지막으로 show () 를 호출하여 창을 표시합니다.
캡처 좀 봐, 더 직관적이야.
중간의 공백은 items:[{}]의 걸작입니다. 기본 {}는 Ext.Panel이 됩니다. 우리는 아무것도 정의하지 않았습니다. 안에 자연히 아무것도 없습니다.물론 500*300은 이만한 크기는 아니지만 그림을 작게 만들기 위해 끌고 내렸어요. 헤헤~ 자동으로 지원되는 크기 수정 효과, 멋있죠?
예는 매우 간단하다. lingo-sample/2.0/05-02 참조.html.

5.4.2.2.0 윈도우에 표 추가

 
아, 장소가 다 긁혔으니 표를 만들어 넣으면 되지.
우선 grid를 하나 만듭니다. 아주 간단합니다.나는 바로 제2장의 예를copy에게 주었다. 헤헤, 표인지 그 표인지.
표가 있으면 바로 윈도우에 던지고 ok, 하하~ 효과는 다음과 같다.
봤어?표가 나왔으니 쪽지를 붙이고 싶으면 창문에 다치는 것을 두려워하지 말고 손만 대라.
지금 뒤돌아서서 우리에게 무엇을 주의해야 하는지 보여 주시오.

첫째,grid는render()를 호출할 필요가 없습니다. 윈도우를 추가하면 win에 있습니다.show () 때 안에 있는 구성 요소가 자동으로 렌더링됩니다

둘째, html에서grid에 대응하는div를 윈도우의div에 써서 관계를 삽입해야 한다..

<div id="window-win">
    <div id="grid"></div>
</div>

셋째, 만약grid를 윈도우에 넣는 방법을 모르면 코드를 보여줄게요.

var win = new Ext.Window({
    el:'window-win',
    layout:'fit',
    width:500,
    height:300,
    closeAction:'hide',

    items: [grid],

    buttons: [{
        text:' '
    }]
});

아이템: [grid] 보셨어요?이렇게 쉬운데.

자, 구체적인 예는lingo-sample/2.0/05-03입니다.html.계속 지켜봐 주십시오.

5.5.더 뿌려.

 
위의 것들은 충분하길 바랍니다. 만약 부족하다면, 우리는 더 대단한 것이 있습니다. 만약에 examples의 예를 보면 안에 더 복잡한 대화상자가 있다는 것을 알 수 있습니다. 당신은 심지어 안에서 여러 가지 구조를 사용할 수 있습니다.