学
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); });