ExtJS Ext.MessageBox.alert() 팝업 대화 상자에 대한 자세한 설명 box_extjs

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

Ext.onReady(function() {
Ext .Msg.alert('prompt', '쉼표로 구분된 매개변수 목록'); //이 방법은 매우 일반적입니다
})

렌더링:

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

Ext.onReady(function() {
/ /Define JSON( 구성 개체)
var config = {
title:'Prompt',
msg: 'JSON 구성 방법, 단순'
}
Ext.Msg.show(config) ;
});

렌더링:

위에서 간단한 예를 들었으니 이제 아름다운 인터페이스를 보실 수 있습니다! 다음으로 Ext.MessageBox
Ext.MessageBox는 Obiect 객체에서 상속되며 다양한 스타일의 메시지 프롬프트 대화 상자를 생성하는 데 사용되는 도구 클래스입니다. 이 클래스의 별칭입니다. Ext.MessageBox를 사용하는 것은 Ext.Msg를 사용하는 것과 동일한 효과를 가지며 후자가 더 간단한 방법을 제공합니다. 소개에 앞서 Ext.MessageBox에서 제공하는 정보 프롬프트 박스와 JavaScript에서 제공하는 원래 정보 프롬프트 박스의 차이점에 대해 알아보겠습니다. 크게 3가지 측면에서 "구현 방법", "표시 정보 형식", 그리고 "옵션", "프로그램 운영에 미치는 영향", 세 가지 측면에 대해 아래에서 자세히 설명합니다.
1. 구현 방법:
표준 자바스크립트에서 제공하는 정보 프롬프트 대화 상자는 실제 팝업 창입니다. Ext.MessageBox에서 제공하는 정보 프롬프트 대화 상자는 실제 팝업 창이 아니며 현재 페이지에 표시되는 레이어(div)일 뿐이므로 창을 통해 소프트웨어로 캡처할 수 없습니다
2. 정보 표시 형식:
표준 JavaScript에서 제공하는 정보 프롬프트 대화 상자에 표시되는 내용은 HTML 형식의 텍스트가 아닌 일반 텍스트입니다.
조판을 위해 HEML의 형식 지정 방법을 사용할 수 없습니다. 공백, 캐리지 리턴 및 다양한 구두점 문자만 사용하여 표시 형식을 구성할 수 있습니다.
Ext.MessageBox에서 제공하는 정보 프롬프트 대화 상자에 표시되는 텍스트는 일반 텍스트 표시뿐만 아니라 HTML 형식의 텍스트도 지원하므로 조판을 위해 HTML의 서식 방식을 채택하여 효과가 더욱 다채로워집니다. 아래는 간단한 예입니다.

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

렌더링:

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

//html 형식의 텍스트 지원
Ext.onReady(function() {
Ext.Msg.alert('Prompt',' html 형식 텍스트 지원 ');
});

렌더링:

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

렌더링:

효과를 보는 방법은 아주 간단해요! 함수를 콜백하는 방법을 살펴보겠습니다. 읽기 전용 정보 프롬프트 상자는 JavaScript 표준 경고() 메서드를 확인 버튼으로 대체하는 데 사용됩니다. 콜백 함수를 제공하는 경우 버튼 이후에 함수가 호출됩니다. (오른쪽 상단 모서리에 있는 버튼 포함)을 클릭하면 클릭한 버튼의 ID가 콜백 함수에 유일한 매개변수로 전달됩니다.

호출 형식:
alert(String title,String msg,[function fn],[Object range]) //매개변수 설명
title: 프롬프트 제목 box
msg: 표시된 정보 내용
[function fn]: (선택 사항) 콜백 함수
[Object scopt]: (선택 사항) 콜백 함수 범위
반환 값:
Ext .MessageBox

예:

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

렌더링:
확인 클릭 효과

 

x클릭 효과

 

Tip: ExtJS의 경고는 비동기적으로 실행되어 차단을 일으키지 않으므로 사용자가 확인한 후 실행되는 코드를 콜백 함수에 배치해야 합니다. 그렇지 않으면 사용자가 확인한 후에 후속 코드가 실행되므로 불필요한 작업이 발생합니다. 오류. 주의가 필요한 것입니다.