EXT 창 창 및 대화 상자 MessageBox_extjs

아래 코드를 보세요:

코드를 복사하세요 코드는 다음과 같습니다:

var i =0;
function newWin(){
var win = new Ext.Window({
title:"Window" i ,
너비:400,
높이:300,
최대화 가능:true
});
win.show();
}
Ext.onReady(
function(){
Ext.get("btn").on( "click",newWin );
}
);

페이지의 HTML 콘텐츠:
"새 창" 버튼을 클릭하면 창, 창 제목은 "창 x"이며, 창을 닫거나 최대화할 수 있습니다. 최대화 버튼을 클릭하면 창이 최대화되고, 그림 xxx와 같이 최대화된 창을 복원할 수 있습니다.

창 그룹화
창은 그룹으로 관리되며, 기본적으로 창은 기본 그룹인 Ext.WindowMgr에 속해 있습니다. 창 그룹화는 Ext.WindowGroup 클래스에 의해 정의되며, 여기에는 BringToFront, getActive, hideAll, sendToBack 및 그룹 내 창을 작동하는 기타 메소드가 포함됩니다.
아래 코드를 보세요.

코드를 복사하세요. 코드는 다음과 같습니다.

var i=0 ,mygroup;
function newWin(){
var win=new Ext.Window({
title:"Window" i ,
너비:400,
높이: 300,
maximized:true,
manager:mygroup
})
win.show()
}
function toBack(){
mygroup.sendToBack(mygroup .getActive()) ;
}
function hideAll(){
mygroup.hideAll()
}
Ext.oReay(
function(){
mygroup= new Ext.WindowGroup( );
Ext.get("btn").on("click",newWin)
Ext.get("btnToBack").on("click",toBack); 🎜>Ext.get ("btnHide").on("click",hideAll);
}
)

　페이지의 html 코드
　위 실행 코드를 작성하고 먼저 몇 번 클릭하십시오. "새 창" 버튼을 사용하면 페이지에 여러 컨테이너를 표시한 다음 이러한 창을 화면의 다른 위치로 끌 수 있습니다. 그런 다음 "배경으로 보내기" 버튼을 클릭하여 맨 앞의 창을 창 그룹의 뒤로 이동합니다. 현재 열려 있는 모든 창을 숨기려면 "모두 숨기기" 버튼을 클릭하세요. 아래 그림과 같습니다.


대화 상자 전통적인 경고, 확인 및 기타 방법의 사용으로 인해 생성된 대화 상자는 매우 구식이며 잘생기지 않았어. 따라서 ExtJS는 전통적인 경고, 확인 등을 대체하여 멋진 애플리케이션 인터페이스를 달성하는 데 사용할 수 있는 매우 아름다운 대화 상자 세트를 제공합니다.
Ext의 대화 상자는 Ext.MessageBox 클래스에 캡슐화되어 있습니다. 이 클래스에도 Ext.Msg라는 축약형이 있습니다. Ext.MessageBox 또는 Ext.Msg를 통해 해당 대화 상자 메소드를 직접 호출하여 Ext 대화 상자를 표시할 수 있습니다. . 아래 코드를 보세요.

코드를 복사하세요. 코드는 다음과 같습니다.

Ext. onReady(
function(){
Ext.get("btnAlert").on(
"click",
function(){
Ext.MessageBox.alert("참고하세요" ,"ExtJS 프롬프트 상자입니다.");
}
);


HTML 페이지의 내용:
프로그램을 실행하고 "상자" 버튼 위의 "경고"를 클릭하면 페이지에 아래와 같은 대화 상자가 표시됩니다.

Ext에는 경고 외에도 확인, 프롬프트, 진행, 대기 및 기타 대화 상자가 포함되어 있으며 필요에 따라 사용자 정의 대화 상자를 표시할 수 있습니다. 일반적인 대화 상자에는 일반적으로 4개의 매개 변수가 포함되어 있습니다. 예를 들어, 확인 메서드 시그니처는 확인(문자열 제목, 문자열 메시지, [함수 fn], [개체 범위])입니다. msg는 대화 상자의 프롬프트를 나타냅니다. 정보, 이 두 매개 변수는 필수입니다. 선택적 매개 변수 fn은 대화 상자가 닫힐 때 실행되는 콜백 함수를 나타내고 매개 변수 범위는 콜백 함수의 실행 범위를 나타냅니다. 콜백 함수에는 버튼과 텍스트라는 두 개의 매개변수가 포함될 수 있습니다. 버튼은 클릭한 버튼을 나타내고, 텍스트는 대화 상자에 활성 입력 옵션이 있을 때 입력된 텍스트 내용을 나타냅니다. 콜백 함수의 버튼 매개변수를 사용하여 사용자가 어떤 선택을 했는지 확인할 수 있으며, 텍스트를 사용하여 대화 상자에 입력된 내용을 읽을 수 있습니다. 아래 예를 보세요.

코드 복사 코드는 다음과 같습니다.

Ext.onReady(
function(){
Ext.get("btn").on(
"click",
function(){
Ext. MessageBox.confirm(
"확인해주세요", "지정된 콘텐츠를 정말로 삭제하시겠습니까?",
function(button,text){
alert(button);
alert(text) ;
}
);
}
);


대화상자 버튼 클릭 다음 대화 상자가 나타나고 예 또는 아니요를 선택하면 기존 프롬프트 상자가 콜백 함수의 버튼 내용과 텍스트 매개 변수를 출력하는 데 사용됩니다.

따라서 실제 응용에서는 위의 코드를 다음과 같이 변경할 수 있습니다.



코드 복사

코드는 다음과 같습니다. Ext.onReady( function(){

Ext.get("btnAlert").on(

"click",
function(){
Ext.MessageBox.confirm(
"확인해주세요",
"지정된 내용을 삭제하시겠습니까?",
function(button,text){
if( 버튼=="예"){
//삭제 작업 수행
alert("삭제 성공")
}
}
); );
}
);


이렇게 하면 사용자가 대화 상자에서 예 버튼을 클릭하면 해당 작업이 수행되고, 아니오를 선택하면 해당 작업이 무시됩니다. .

프롬프트 상자를 다시 살펴보겠습니다. 다음 코드를 살펴보겠습니다.

코드를 복사합니다.

Ext.onReady( function(){ Ext.get("btn").on( "click",

function( ){

Ext .MessageBox.prompt(
"입력 프롬프트 상자",
"새해 소원을 입력하세요:",
function(button,text){
if(button= ="ok"){
alert("새해 소원은:" text)
}
else
alert("타이핑을 포기하셨습니다!")
}
);
}
);
}
)


HTML 페이지:
위의 "대화 상자" 버튼을 클릭하면 아래와 같이 내용이 표시됩니다. . 확인 버튼을 클릭하면 입력한 텍스트 내용이 입력됩니다. 취소 버튼을 선택하면 다음 그림과 같이 입력을 포기하라는 메시지가 표시됩니다.

실제 애플리케이션에서는 MessageBox의 show 메소드를 직접 사용하여 다음 코드와 같은 사용자 정의 대화 상자를 표시할 수 있습니다.
코드 복사

코드는 다음과 같습니다. 함수 저장(버튼){ if(button=="yes"){ //데이터 저장 작업 수행}

else if(button=="no" ){

//데이터 저장 안함
}
else{
//현재 작업 취소
}
}
Ext.onReady(
function(){
Ext.get("btn").on(
"click",
function(){
Ext.Msg.show ({
title:'데이터 저장',
msg: '일부 데이터 작업을 완료했습니다. 현재 콘텐츠의 변경 사항을 저장하시겠습니까?',
버튼: Ext.Msg.YESNOCANCEL,
fn: 저장,
icon: Ext.MessageBox.QUESTION
})
}
); "대화 상자" 버튼을 클릭하면 사용자 정의된 데이터 저장 대화 상자가 표시됩니다. 상자에는 그림 xx와 같이 콜백 함수 저장에서 클릭한 버튼에 따라 해당 작업을 수행할 수 있습니다.