EXT ウィンドウ ウィンドウとダイアログ ボックス MessageBox_extjs

以下のコードを見てください:

コードをコピーします コードは次のとおりです:

var i =0;
function newWin(){
var win = new Ext.Window({
title:"Window" i ,
width:400,
height:300,
maximizable: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 ,
width:400,
height: 300,
maximizable:true,
manager:mygroup
});
win.show()
}
function toBack(){
mygroup.sendToBack(mygroup) .getActive()) ;
}
関数 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(
"クリック",
function(){
Ext.MessageBox.alert("ご注意ください" ,"これは ExtJS プロンプト ボックスです");
}
)
}
HTML ページの内容:
プログラムを実行します。 「ボックス」ボタンの上にある「アラート」をクリックすると、ページ上に次のようなダイアログボックスが表示されます。


Ext には、アラートに加えて、確認、プロンプト、進行状況、待機などのダイアログ ボックスも含まれており、必要に応じてカスタム ダイアログ ボックスを表示できます。通常のダイアログ ボックスには、通常、4 つのパラメータが含まれます。たとえば、confirm のメソッド シグネチャは、confirm (文字列タイトル、文字列 msg、[関数 fn]、[オブジェクト スコープ]) です。パラメータ title は、ダイアログ ボックスのタイトルとパラメータを表します。 msg はダイアログ ボックス内のプロンプトを表します。これらの 2 つのパラメータは必須です。オプションのパラメータ fn はダイアログ ボックスを閉じるときに実行されるコールバック関数を表し、パラメータのスコープはコールバック関数の実行スコープを表します。コールバック関数には、button と text という 2 つのパラメータを含めることができます。button はクリックされたボタンを表し、text はダイアログ ボックスにアクティブな入力オプションがあるときに入力されたテキストの内容を表します。コールバック関数のボタン パラメータを使用して、ユーザーがどのような選択をしたかを判断したり、テキストを使用してダイアログ ボックスに入力された内容を読み取ることができます。以下の例を見てください:

コードをコピーします

コードは次のとおりです:

Ext.onReady(
function(){
Ext.get("btn").on(
"クリック",
function(){
Ext. MessageBox.confirm(
"ご確認ください", "指定されたコンテンツを削除してもよろしいですか?",
function(button,text){
alert(button);
alert(text) ;
}
);
}
}
HTML コンテンツ:

次のダイアログ ボックスが表示され、[はい] または [いいえ] を選択します。従来のプロンプト ボックスを使用して、ボタンの内容とコールバック関数のテキスト パラメーターが出力されます。

したがって、実際のアプリケーションでは、上記のコードは次のように変更できます。



コードをコピー

コードは次のとおりです: Ext.onReady( function(){

Ext.get("btnAlert").on(

"click",
function(){
Ext.MessageBox.confirm(
"ご確認ください",
"指定されたコンテンツを本当に削除しますか?",
function(button,text){
if( button=="yes"){
//削除操作を実行します
alert("正常に削除されました")
}
}
); );
}
);


このように、ユーザーがダイアログ ボックスで [はい] ボタンをクリックすると、対応する操作が実行され、[いいえ] を選択すると操作が無視されます。 。

もう一度プロンプト ボックスを見てみましょう。次のコードを見てみましょう。

コードをコピーします。

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

function( ){

Ext .MessageBox.prompt(
"入力プロンプトボックス",
"新年のお願い事を入力してください:",
function(button,text){
if(button= ="ok"){
alert("あなたの新年の願いは:" text);
else
alert("入力するのをやめました!"); >);
}
);
}
HTML ページ:
上の「ダイアログ」ボタンをクリックすると、以下のような内容が表示されます。 [OK] ボタンをクリックすると、入力したテキストの内容が入力されます。 [キャンセル] ボタンを選択すると、次の図に示すように、入力を中止するよう求められます:



実際のアプリケーションでは、MessageBox の show メソッドを直接使用して、次のコードのようなカスタム ダイアログ ボックスを表示できます:




コードをコピー

コードは次のとおりです:
function save(button){ if(button=="yes"){ //データ保存操作を実行します
}
else if(button=="no" ){

//データを保存しません} else{ //現在の操作をキャンセルします} } Ext.onReady(

function(){

Ext.get("btn").on(
"クリック",
function(){
Ext.Msg.show ({
title:'データの保存',
msg: 'いくつかのデータ操作を実行しました。現在のコンテンツへの変更を保存しますか?',
ボタン: Ext.Msg.YESNOCANCEL,
fn: 保存、
アイコン: Ext.MessageBox.QUESTION
}
);


「ダイアログ」ボタンをクリックすると、カスタマイズされたデータ保存ダイアログ ボックスが表示されます。ボックスには、図 xx に示すように、はい、いいえ、キャンセルの 3 つのボタンが含まれています。