Ext jsメッセージボックスコンポーネント
5903 ワード
1.基本ポップアップ
2.ポップアップボックスの確認
3.プロンプトポップアップ
4.マルチラインユーザー入力ボックス
5.ボックスをキャンセルするかどうか
Ext.Msg.alert('Title', 'Basic message box in ExtJS');
{
xtype: 'button',
text: 'Button',
listeners: {
click: function () {
Ext.Msg.alert(' ', ' ');
}
}
}
2.ポップアップボックスの確認
Ext.MessageBox.confirm('Confirm', Msg, optional callbackFunction());
{
xtype: 'button',
text: 'confirm',
listeners: {
click: function () {
Ext.MessageBox.confirm(' ', 'Are you sure you want to do this ?', callbackFunction);
function callbackFunction(btn) {
if (btn == 'yes') {
Ext.Msg.alert('Click', 'You clicked the Yes button');
} else {
Ext.Msg.alert('Click', 'You clicked the No button');
}
};
}
}
}
3.プロンプトポップアップ
Ext.Msg.prompt('Name', 'Please enter your name:', function(){});
{
xtype: 'button',
text: 'Click Me',
listeners: {
click: function () {
Ext.Msg.prompt('Name', 'Please enter your name:', function (btn, text) {
if (btn == 'ok') {
Ext.Msg.alert('Hello', 'Hello ' + text);
}
});
}
}
}
4.マルチラインユーザー入力ボックス
Ext.MessageBox.show({
title: 'Details',
msg: 'Please enter your details:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true, // this property is for multiline user input.
fn: callbackFunction
});
{
xtype: 'button',
text: 'Click Me',
listeners: {
click: function() {
Ext.MessageBox.show({
title: 'Details',
msg: 'Please enter your details:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: callbackFunction
});
function callbackFunction (){
Ext.Msg.alert('status', 'Details entered succesfully');
}
}
}
}
5.ボックスをキャンセルするかどうか
Ext.MessageBox.show({
title: 'Details',
msg: 'Please enter your details:',
width:300,
buttons: Ext.MessageBox.YESNOCANCEL // this button property for all three options YES, NO, Cancel.
});
{
xtype: 'button',
text: 'Click Me',
listeners: {
click: function() {
Ext.MessageBox.show({
title: 'Details',
msg: 'Please enter your details:',
width:300,
buttons: Ext.MessageBox.YESNOCANCEL,
multiline: true,
fn: callbackFunction
});
function callbackFunction (){
Ext.Msg.alert('status', 'Details entered succesfully');
}
}
}
}