extjs学习----官方模版注释2

这次是一些弹出框。自己将官方的看了几遍,重写了下。其实也差不了多少,加上自己的注释。。。

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<head>

	<title>test page</title>

	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>

	<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>

	<script type="text/javascript" src="../ext-all.js"></script>

	<script type="text/javascript">

		Ext.onReady(function(){

			//各种弹出框的返回值都是可以作为string传递给回调函数来当作参数接收的。

			//下面的showResult 和 showResultText函数就是这样接受的参数

			//官方的例子中的showResult 和 showResultText函数中使用的Ext.example.msg()不是extjs中内置的。所以在这里改了。

			Ext.get('mb1').on('click',function(e){

				Ext.Msg.confirm('Confirm','Are you sure you want to do that?',showResult);

			});

			

			Ext.get('mb2').on('click',function(e){

				Ext.Msg.prompt('Prompt','enter your name:',showResultText);

			});

			

			Ext.get('mb3').on('click',function(e){

				Ext.Msg.show({

					title:'address',

					msg:'input your address',

					width:300,

					buttons:Ext.Msg.OKCANCEL,

					multiline:true,//说明这个是多行的,如果去掉这个选项,则没有输入区域。

					fn:showResultText,//当对话框关闭后的回调函数。

					animEl:'mb3'//可以理解为出现动画效果的选项(个人理解,欢迎拍砖)

				});

			});

			

			Ext.get('mb4').on('click',function(e){

				Ext.Msg.show({

					title:'intializing',

					msg:'loading...',

					width:300,

					progress:true,//显示进度条

					closable:false,//隐藏右上角关闭按钮。progress 和 wait 对话框中默认隐藏关闭按钮,只能通过关闭程序关闭窗口。

					animEl:'mb4'

				});

				var f = function(v){

					return function(){

						if(v==12){

							Ext.MessageBox.hide();

							Ext.Msg.alert('Done','completed!!!');

						} else {

							var i = v/11;

							Ext.Msg.updateProgress(i,Math.round(100*i)+'% completed');

						}

					};

				};

				for(var i=1;i<13;i++){

					setTimeout(f(i),i*500);

				}

			});

			Ext.get('mb5').on('click',function(e){

				Ext.Msg.show({

					title:'wait',

					progress:true,

					progressText:'update your data...',//进度条内显示的文本

					width:300,

					wait:true,

					icon:'ext-mb-download',

					animEl:'mb5'

				});

				setTimeout(function(){

					Ext.Msg.hide();

					Ext.Msg.alert('Done','your fake data was saved');

				},8000);

			});

			

			Ext.get('mb6').on('click',function(e){

				Ext.Msg.show({

					title:'yes/no/cancel',

					msg:'save?',

					buttons:Ext.Msg.YESNOCANCEL,

					fn:showResult,

					animEl:'mb6',

					icon:Ext.Msg.QUESTION

				});

			});

			

			Ext.get('mb7').on('click',function(){

				Ext.Msg.alert('alert','this is only a test alert!',showResult);

			});

			//下面这些大家都很容易看懂的。。。(*^__^*)

			Ext.fly('info').dom.value = Ext.Msg.INFO;

			Ext.fly('question').dom.value = Ext.Msg.QUESTION;

			Ext.fly('warning').dom.value = Ext.Msg.WARNING;

			Ext.fly('error').dom.value = Ext.Msg.ERROR;

			

			Ext.get('mb8').on('click',function(){

				Ext.Msg.show({

					title:'Icon support',

					msg:'here is a message with an icon!',

					buttons:Ext.Msg.OK,

					animEl:'mb8',

					fn:showResult,

					icon:Ext.get('icons').dom.value

				});

			});

			

			

			function showResult(btn){

				Ext.Msg.alert("Button Click",'you clicked the button:'+btn);

			}

			function showResultText(btn,text){

				Ext.Msg.alert("Button Click",'you clicked the button:'+btn+' and entered the text:'+text);

			}

		});

	</script>

</head>

<body>

	<p>

		confirm:<button id="mb1">show</button>

	</p>

	<p>

		prompt:<button id="mb2">show</button>

	</p>

	<p>

		Multi-line prompt:<button id="mb3">show</button>

	</p>

	<p>

		progress dialog:<button id="mb4">show</button>

	</p>

	<p>

		wait dialog:<button id="mb5">show</button>

	</p>

	<p>

		yes/no/cancels:<button id="mb6">show</button>

	</p>

	<p>

		alert:<button id="mb7">show</button>

	</p>

	<p>

		<b>Icons</b><br/>

		Standard alert with optional icon.

		<select id="icons">

			<option id="error" selected="selected">Error</option>

			<option id="info">Informational</option>

			<option id="question">Question</option>

			<option id="warning">Warning</option>

		</select>

		<button id="mb8">show</button>

	</p>

</body>

</html>

  

你可能感兴趣的:(ExtJs)