extjs学习—-官方模版注释2
简介：这是extjs学习—-官方模版注释2的详细页面，介绍了和javascript,有关的知识、技巧、经验，和一些javascript源码等。这次是一些弹出框。自己将官方的看了几遍，重写了下。其实也差不了多少，加上自己的注释。。。
<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>
