Ext--MessageBox教程
<html><head> <link rel="stylesheet" type="text/css" href="./ext-all.css" /><script type="text/javascript" src="./ext-base.js"></script><script type="text/javascript" src="./ext-all.js"></script><script type="text/javascript">// 一定要 onReady开始 不然第一次点击按钮会没有反映，要点击第二次才有反映的，因为第一次点击变成加载了！Ext.onReady(function(){//alert 提示框 Ext.get('mb8').on('click', function(e){ Ext.MessageBox.alert('Status', 'Changes saved successfully.',showResult); });// 选择框 Ext.get('mb1').on('click', function(e){ Ext.MessageBox.confirm('选择','你是否确定?',showResult); });// 对话框 Ext.get('prompt').on('click', function(e){ Ext.MessageBox.prompt('对话框','请输入你的名字?',showResult2); });// 文本域对话框 Ext.get('mprompt').on('click', function(e){ Ext.MessageBox.show({ title: 'Address', msg: 'Please enter your address:', width:300, buttons: Ext.MessageBox.OKCANCEL, multiline: true, fn: showResult2, animEl: 'mprompt' }); });//进度条Ext.get('progress').on('click', function(){Ext.MessageBox.show({ title: 'Please wait', msg: 'Loading items...', progressText: 'Initializing...', width:300, progress:true, closable:false, animEl: 'mb6' }); // 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');} }; }; for(var i = 1; i < 13; i++){ setTimeout(f(i), i*500); }});//保存Ext.get('save').on('click', function(){//alert(Ext.MessageBox.ERROR); Ext.MessageBox.show({ msg: 'Saving your data, please wait...', progressText: 'Saving...', width:300, wait:true, waitConfig: {interval:200}, icon:Ext.MessageBox.INFO, //这里可以自定义图片的，要修改到 ext-all.css 文件里面(个人做法) animEl: 'save' }); setTimeout(function(){ //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!');Ext.MessageBox.alert('Status', 'Changes saved successfully.'); }, 8000); });function showResult(btn){Ext.MessageBox.alert('内容',btn);}function showResult2(btn,text){if(btn == 'ok')Ext.MessageBox.alert('内容2',text);elseExt.MessageBox.alert('内容2',btn);}});</script></head><body><center><div style="width:800px;height:300px;border:1px groove pink"><table style='width:800px;height:300px'><tr><td><button id='mb1' style='width:128px'>Confirm </button></td></tr><tr><td><button id='mb8' style='width:128px'>Alert</button></td></tr><tr><td><button id='progress' style='width:128px'>Progress </button></td></tr><tr><td><button id='save' style='width:128px'>Save </button></td></tr><tr><td><button id='prompt' style='width:128px'>Prompt </button></td></tr><tr><td><button id='mprompt' style='width:128px'>M Prompt </button></td></tr></table></div></center></body></html> 有些源码和样式我都进行修改过！如果需要可以下载来看！
页:
[1]