1.基本弹出框
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');
}
}
}
}