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>
總結
以上是生活随笔為你收集整理的extjs学习—-官方模版注释2的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 人的正常血压是多少范围男40岁50（人的
- 下一篇： Oracle LAST_DAY(d)