1、alert对话框 效果图:
function a1(){
Ext.MessageBox.alert('title','text'); }
2、confirm案例,确定不确定2个按钮对话框
效果图:
代码:
Ext.MessageBox.confirm('title','warn test',showres); function showres(btn){ //传入btn,这里指的是YES,NO
alert(btn); }
3、prompt案例,带有输入框的对话框
效果图:
代码:
function p1(){ Ext.MessageBox.prompt('title','请输入一些文档',showrestxt); } function showrestxt(btn,text){ alert(btn); alert(text); }
4、带有输入框的对象框show
效果图:
代码:
function s1(){ //可以写带有图片的确认框,自定义确认框 Ext.MessageBox.show({ title: 'Address', msg: 'Please enter your address:', 300, buttons: Ext.MessageBox.OKCANCEL, //你也可以自定义按钮上面的字:{"ok","我本来是ok的"}。
multiline: true, fn: showrestxt }); }
5、progress进度条的show对话框 //第一种:(通过进度的大小控制进度,满进度为1)
效果图:
代码:
//进度条对话框 function s2(){ Ext.MessageBox.show({ title: 'Please wait', msg: 'Loading items...', progressText: 'Initializing...', 300, progress:true, closable:false }); // this hideous block creates the bogus progress 进度条程序 var f = function(v){ return function(){ if(v == 12){ Ext.MessageBox.hide(); Ext.example.msg('Done', 'Your fake items were loaded!'); }else{ var i = v/11; Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed'); //注意i为0-1之间的数,表示进度条的进度. } }; }; for(var i = 1; i < 13; i++){ setTimeout(f(i), i*500); } }
6、保存对话框带进度对话框(图片文件未加入) //第二种:(通过固定时间控制进度加载)
效果图:
代码:/下载时候图像的对话框
function downl(){
Ext.MessageBox.show({
msg: 'Saving your data, please wait...',
progressText: 'Saving...',
300,
wait:true,
waitConfig: {interval:200},
icon:'ext-mb-download', //custom class in msg-box.html
animEl: 'elId' //这是一个控制跳出的框飞行的属性 animEl: 'elId',说明html里ID属性<input type="button" id='elId' onclick=xxxx();/>
});
setTimeout(function(){ //setTimeout 是指等待多长时间,就调用的意思
//This simulates a long-running operation like a database save or XHR call.
//In real code, this would be in a callback function.
Ext.MessageBox.hide();
Ext.example.msg('Done', 'Your fake data was saved!');
}, 8000);
}
-------------------------------------------------
closable:如果为false,则不显示右上角的小叉叉,默认为true。
prompt:设为true,则弹出框带有输入框
multiline:设为true,则弹出框带有多行输入框
progress:设为true,显示进度条,(但是是死的)
wait:设为true,动态显示progress
waitConfig:配置参数,以控制显示progress