今天主要记录一下学习的Ext.MessageBox。
废话少说 直接上代码和效果
预备代码(javascript):
Ext.MessageBox有个简写形式:Ext.Msg 这两种使用效果是一样的。
1 Ext.require(["*"]);
2
3 var DemoFunc = {
4 evtAfterClick: function (btn, text) {
5 alert("点击按键类型:" + btn);
6 if (undefined != text && null != text) {
7 alert("输入数据:" + text);
8 }
9 }
10 };
一、javascript中的提示框在Ext.MessageBox中的展现
Ext.get('btnA1').on('click', function (e) {
Ext.Msg.alert('alert', '点击alert键', DemoFunc.evtAfterClick);
});
Ext.get('btnA2').on('click', function (e) {
Ext.Msg.prompt('prompt', '点击prompt键', DemoFunc.evtAfterClick);
});
Ext.get('btnA3').on('click', function (e) {
Ext.Msg.confirm('confirm', '点击confirm键', DemoFunc.evtAfterClick);
});
二、丰富javascript自带的提示框
Ext.get('btnB1').on('click', function (e) {
Ext.MessageBox.show({
title: '更新地址信息',
msg: '请输入您的地址:',
width: 300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: DemoFunc.evtAfterClick
});
});
Ext.get('btnB2').on('click', function (e) {
Ext.MessageBox.show({
title: '标准3键提示框(Yes/No/Cancel)',
msg: '你即将关闭一个未保存的更改。<br />您想保存更改吗?',
width: 300,
buttons: Ext.MessageBox.YESNOCANCEL,
fn: DemoFunc.evtAfterClick,
icon: Ext.MessageBox.QUESTION
});
});
三、可指定的提示框图标
Ext.get('btnC1').on('click', function (e) {
Ext.MessageBox.show({
title: 'Icon Support',
msg: 'Error',
buttons: Ext.MessageBox.OK,
fn: DemoFunc.evtAfterClick,
icon: Ext.MessageBox.ERROR
});
});
以下三个提示框的图标展示代码省略,更换上面代码中的icon即可。
icon: Ext.MessageBox.INFO
icon: Ext.MessageBox.QUESTION
icon: Ext.MessageBox.WARNING
四、自定义按钮文字的提示框
Ext.get('btnD1').on('click', function (e) {
Ext.MessageBox.show({
title: 'What, really?',
msg: 'Are you sure?',
buttons: Ext.MessageBox.YESNO,
buttonText: {
yes: "好的",
no: "算了吧"
},
fn: DemoFunc.evtAfterClick
});
});
五、Ext中扩展的提示框
Ext.get('btnE1').on('click', function (e) {
Ext.MessageBox.show({
title: '请稍后',
msg: '数据加载中……',
progressText: '数据加载中……',
width: 300,
progress: true,
closable: false,
});
var f = function (v) {
return function () {
if (v == 12) {
Ext.MessageBox.hide();
Ext.example.msg('加载成功', '数据加载成功!');
} else {
var k = v / 11;
Ext.MessageBox.updateProgress(k, "已加载 " + Math.round(100 * k) + '%');
}
};
};
for (var i = 1; i < 13; i++) {
setTimeout(f(i), i * 500);
}
});
Ext.get('btnE2').on('click', function (e) {
Ext.MessageBox.show({
msg: '正在保存数据,请稍后……',
progressText: '保存中...',
width: 300,
wait: true,
waitConfig: { interval: 200 },
icon: 'ext-mb-download'
});
setTimeout(function () {
Ext.MessageBox.hide();
Ext.example.msg('保存成功', '您的数据已经保存成功!');
}, 2000);
});